是否通过单击div删除父元素？

Question

我有一个像这样生成的表单

        <%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();


    });

我正在创建一个id为i的delete按钮，我认为jquery会获取我单击的元素，然后找到它的父div并删除整个div。然而，这并没有发生，你知道为什么吗？

Answer 1

您正在混合使用jQuery和普通javascript。在jQuery事件处理程序中，this是一个DOM对象(不是jQuery对象)，而DOM对象没有.parent()方法。它有一个.parentNode属性。如果想要获得一个可以调用jQuery方法.empty()的jQuery对象，则需要像这样使用$(this)：

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

或者，用一种更简洁的方式：

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

此外，.empty()将只清除父对象的内容。它不会删除父节点，但会删除父节点中的所有子节点(例如清空父节点)。如果您想实际删除父对象，可以像这样使用.remove()：

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

Answer 2

这是因为闭包中的this语句不是jQuery对象。它只是一个HTMLElement。因此，您需要首先将this转换为jQuery才能访问.parent()方法：

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