javascript - 通过查询仅删除一个 div

Question

这是JsFiddle

我有一个按钮，单击它会添加新的标题、文本框和链接。

但是当我点击删除链接时。它会删除所有添加的新项目。

HTML:

<div id='main'>
Top of Boby
    <div id='main_1'>
        <div>
            <h3> Item</h3>
            <input type="text" />
        </div>
     </div>
</div>

JS:

$(function() {
    $('.AddItem').click(function() {
        $('div#main_1').append("<div><h3>Item</h3><input type='text' class='remove_skill'/><a href=''>Remove</a</div>");
    });
})
$(function() {
    $('.remove_skill').click(function() {
        $(this).remove();
    });
})

Answer 1

2 个问题..

您从未定义过 anchor 的类。将类添加到 anchor

您需要删除封闭的div并且不删除 anchor 。使用.closest

此外，您还需要在动态添加元素时委托(delegate)事件

 $('#main').on('click', '.remove_skill',  function (e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });

<强> Check Fiddle