jquery - 动态向页面添加元素然后删除它们

Question

我设置了一个 jQuery 控件，它将包含文本框的表格动态添加到页面。

添加部分工作正常，但无论我在表格中单击何处，最后的删除功能都会触发...我只是希望它在单击删除按钮时删除表格。

有更好的设置方法吗？

谢谢

    var linkCounter = 1;

    $("#btnAddLink").click(function () {
        if (linkCounter > 10) {
            alert("Only 10 learning objectives allowed per page.");
            return false;
        }

      var newTextBoxDiv = $(document.createElement('div')).attr("id", 'link' + linkCounter);
        newTextBoxDiv.after().html(
            '<table>' +
                '<tr><td>' +
                '<label>URL: </label>' +
                '</td><td>' +
                '<input type="text" name="tbLinkUrl" style="width: 300px;"' +
                '" id="tbLinkUrl' + counter + '" value="" >' +
                '</td></tr><tr><td>' +
                '<label>Label: </label>' +
                '</td><td>' +
                '<input type="text" name="tbLinkLabel" style="width: 300px;"' +
                '" id="tbLinkLabel' + counter + '" value="" >' +
                '</td></tr></table>');
           newTextBoxDiv.Append.Html(
              '&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">').click(function () {
                  $(this).remove();
                  linkCounter--;
              });
        newTextBoxDiv.appendTo("#linksGroup");
        linkCounter++;
    });

Answer 1

我已将您的删除点击事件绑定(bind)移至 addLink 事件绑定(bind)之外。现在它是由 body 委派的。在下面的示例中，事件被委托(delegate)给具有“removeLink”类的所有元素。单击该按钮将删除其父级。

我做了一些小改动以使其能够作为演示使用。重要的部分是底部的委托(delegate)(使用on)。

Demo

HTML:

<input id="btnAddLink" value="Click!" type="button" />

Javascript:

var linkCounter = 1;

$("#btnAddLink").click(function () {
    if (linkCounter > 10) {
        alert("Only 10 learning objectives allowed per page.");
        return false;
    }
    var newTextBoxDiv = $("<div>").attr("id", 'link' + linkCounter);
    $(this).after(newTextBoxDiv);
    newTextBoxDiv.html(
        '<table>' +
        '<tr><td>' +
        '<label>URL: </label>' +
        '</td><td>' +
        '<input type="text" name="tbLinkUrl" style="width: 300px;"' +
        '" id="tbLinkUrl' + linkCounter + '" value="" >' +
        '</td></tr><tr><td>' +
        '<label>Label: </label>' +
        '</td><td>' +
        '<input type="text" name="tbLinkLabel" style="width: 300px;"' +
        '" id="tbLinkLabel' + linkCounter + '" value="" >' +
        '</td></tr></table>');
    newTextBoxDiv.append('&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">');
    newTextBoxDiv.appendTo("#linksGroup");
    linkCounter++;
});

$('body').on('click','.removeLink',function(){
    $(this).parent().remove();
    linkCounter--;
});