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

Question

我想通过单击按钮将一些列表项添加到 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

Answer 1

这里需要使用事件委托

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

Fiddle

Answer 2

您需要使用事件委托：

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

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

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

Answer 3

使用以下代码

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

Answer 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();    
});

Answer 5

您创建了一个 'delete' 按钮。然后呢？您只需将其附加到 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();
});

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

Answer 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>");
});

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

Add items to ul and delete them

jquery

add