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的删除按钮，我认为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();

通过单击div删除父元素？

2 个答案: