Блог

У меня создается форма, подобная этой

         <%for (var i = 0; i < user.categories.length; i  ) {%>
        <div class="form-group" id="<%=i %>">
        <input type="text" class="form-control" name="category<%=i %>name" value="<%=user.categories[i].taskname%>" placeholder = "Enter task name">
        <input type="number" class="form-control" name="category<%=i %>priority" value="<%=user.categories[i].taskpriority%>" placeholder = "Enter task priority" min="1" max="3">
        <input type="number" class="form-control" name="category<%=i %>duration" value="<%=user.categories[i].taskduration%>" placeholder = "Enter task duration" min="0" max="24">
        <button class = "delete" id="<%=i %>" type="button">Delete</button>
            <!--<input type="text" class="form-control" name="category<%=i %>" value="<%=user.categories[i] %>"> -->
                            <br>
        </div>
                        <br>

        <%} %>
  

И этот скрипт

     $(".delete").click(function(){
        var parent = this.parent();
        alert(this.id); 
        parent.empty();


    });
  

Я создаю кнопку удаления с идентификатором i, и я подумал, что jquery захватит элемент, на который я нажал, затем найдет его родительский div и удалит весь div. Однако этого не происходит, есть идеи, почему?

Вы смешиваете jQuery и обычный javascript. В обработчике событий jQuery this является объектом DOM (не объектом jQuery), а объект DOM не имеет .parent() метода. У него есть .parentNode свойство. Если вы хотите получить объект jQuery, для которого вы можете вызвать метод jQuery .empty() , тогда вам нужно использовать $(this) вот так:

 $(".delete").click(function(){
    var parent = $(this).parent();
    parent.empty();
});
  

Или более компактным способом:

 $(".delete").click(function(){
    $(this).parent().empty();
});
  

Кроме того, .empty() просто очистит содержимое родительского элемента. Это не приведет к удалению родительского элемента, но удалит все дочерние узлы в родительском элементе (например, очистит родительский элемент). Если вы действительно хотите удалить родительский элемент, вы бы использовали .remove() вот так:

 $(".delete").click(function(){
    $(this).parent().remove();
});
  

Это происходит потому, что this оператор в замыкании не является объектом jQuery. Это всего лишь HTMLЭлемент. Итак, сначала вам нужно преобразовать this в jQuery, чтобы получить доступ к методу .parent():

 var parent = jQuery(this).parent();