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

您创建了一个＆＃39;删除＆＃39;按钮。那又怎样？您只需将其附加到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属性），删除其中的每个内容span即删除按钮和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并删除它们

6 个答案: