Question

我试图编写多部分用户创建的列表应用程序， like this

允许用户在输入字段中输入文本，并根据点击的按钮，确定新列表项将添加到哪个部分....现在我的当前jquery代码 -

.append('< li >' + $('.userTextInput').val() + '< button class="deleteButton" >DELETE< /button >')

在新列表项中给出了一个按钮元素，我希望用它来允许用户删除列表项（如果不再需要它）。

我试图使用与li一起创建的新按钮，如果单击则删除父li，我想通过jquery点击时删除父列表项。到目前为止我试过这个......没有运气......

$('.deleteButton').on('click',removeParentLi());

function removeParentLi() {

    $(this).parent().remove(); 

};

Answer 1

检查此片段，（对于动态添加的按钮（元素），使用jQuery .on函数为其父级）

＆＃13;

p++;

＆＃13;

$('#add').click(function(){
var itemToAdd = $('#itemToAdd').val();
$("#list").append('<li>'+itemToAdd+' <button class="remove">X</button></li>')
});

$('#list').on('click','.remove',function(){
$(this).parent().remove();
});

＆＃13;

Answer 2

那里有2个小错误。首先，绑定事件但列表项可能还没有。这样做的诀窍是使用事件委托，我们在一个始终存在的DOM节点上添加事件，并告诉jQuery仅在单击特定子节点时触发它。这是沉重的话，但代码很容易。

第二个问题是，在定义处理程序时，你传递了函数的结果（因为你添加了（））而不是传递函数本身！

$("#myList").on('click','.deleteButton',removeParentLi);

function removeParentLi() {
    $(this).parent().remove(); 
};

代码假定您的列表具有标识myList，但我们可以直接在文档正文中添加事件，但它会使javascript在所有点击上处理...我保留了您的功能完整，因为它工作正常，我只是删除了事件处理程序定义中的（）。

如何删除包含子项按钮的新附加列表项

2 个答案: