将项目添加到 ul 并删除它们答案

【问题标题】：Add items to ul and delete them将项目添加到 ul 并删除它们
【发布时间】：2015-05-20 10:53:23
【问题描述】：

我想通过单击按钮将一些列表项添加到 unorderdlist。当我点击一个按钮时，我想删除这些项目。

这是我所做的。我可以添加它们但不能删除它们。你能帮帮我吗？

<div class="mydive">
<button id="add">click</button>
<div data-titel="Dit is de titel" data-price="55 euro"></div>
</div>
<ul>

</ul>

$('#add').click(function() {
    var activiteit = $(this).next('div').data();
    var title = activiteit.titel;
    var price = activiteit.price;
    $('ul').append("<li>" + title + price + "</li>" + "<button class='delete'>delete</button>");
});
$('.delete').click(function() {
    $(this).prev('li').remove();
});

JSFIDDLE

【问题讨论】：

将您的线路 $('.delete').click(function() { 更改为 $(document).on("click",".delete",function() { 。这应该工作....jsfiddle.net/ezmmzqmL/5

标签： jquery add

【解决方案1】：

你需要在这里使用事件委托。

$('ul').on("click",".delete",function() {
    $(this).prev('li').remove();
    $(this).remove();
});

Fiddle

【讨论】：

【解决方案2】：

你需要使用事件委托：

$(document.body).on('click','.delete',function() {
    $(this).prev('li').remove();
});

-->https://jsfiddle.net/ezmmzqmL/

顺便说一句，不要把button直接放在UL下面，而是把它放在LI里面

【讨论】：

【解决方案3】：

使用以下代码

jQuery(document.body).on("click",".delete",function() {
    jQuery(this).prev('li').remove();
    jQuery(this).remove();
});

【讨论】：

【解决方案4】：

试试这个Fiddle

$('#add').click(function() {
    var activiteit = $(this).next('div').data();
    var title = activiteit.titel;
    var price = activiteit.price;
    $('ul').append("<li>" + title + price + "</li>" + "<button class='delete'>delete</button>");
});
$(document).on('click', '.delete', function() {    
    $(this).prev('li').remove();
    $(this).remove();    
});

【讨论】：

【解决方案5】：

您创建了一个“删除”按钮。然后呢？您只需将其附加到 DOM。创建它后，您不会将任何点击处理程序附加到它。经典的动态元素问题。

为什么你的代码不起作用：

$('#add').click(function() { // <-- This is executed first.
    ...
    // This is executed THIRD, whenever you click '#add'
    $('ul').append("<li>" + title + price + "</li>" + "<button class='delete'>delete</button>");
});

$('.delete').click(function() { // <-- This is executed SECOND, but no delete button exists yet.
    $(this).prev('li').remove();
});

正如其他四个答案中所说，使用事件委托...

【讨论】：

【解决方案6】：

我已经对 ypur 代码进行了更改，您可以看到正在运行的 jsfiddle 这里。我已将您的每个 li 项目包装在 span 中，以便我可以使用 javascript previousSibling() 属性定位它并将其清空 innerHTML（这也是一个 javascript 属性）删除跨度内的所有内容，即删除按钮和li 元素本身。

<div class="mydive">
    <button id="add">click</button>
    <div data-titel="Dit is de titel" data-price="55 euro"></div>
</div>
<ul>

</ul>

$('#add').click(function() {
    var activiteit = $(this).next('div').data();
    var title = activiteit.titel;
    var price = activiteit.price;
    $('ul').append("<span id='asd'><li>" + title + price + "</li>" + "<button class='delete' onclick='this.parentNode.innerHTML=\"\"'>delete</button></span>");
});

【讨论】：