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 的类。将类添加到锚点

你需要remove the enclosing div和 not the anchor.使用.closest

您还需要在动态添加元素时委托事件

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

检查小提琴

Answer 2

您发布的代码的问题是在您调用的那一刻不存在任何链接$('.remove_skill').click，因此您无法向它们添加事件侦听器。

我推荐一步一步的方法。创建、添加行为、附加到文档。

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

function remove_item() {
    $(this).closest(".item").remove();
    return false;
}

我推荐<a href="#">使用 javascript 处理的链接。

使用闭包的替代解决方案：

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

Answer 3

您的问题是您的“删除”在“a”标签中。这会导致页面重新加载，并删除您之前的所有更改。