Question

我有一个按钮，可以在点击时添加新的标题，文本框和链接。

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

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个问题..

您从未为锚定义类。将类添加到锚

您需要remove the enclosing div和n ot the anchor.使用.closest

此外，您需要在动态添加元素时委派事件

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

<强> Check Fiddle

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”标记中。这会导致页面重新加载，并删除以前的所有更改。

仅使用查询删除一个div

3 个答案: