将元素动态添加到页面，然后将其删除

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

我已经动了你的删除点击事件addLink事件绑定之外的结合。它现在从身体委派。在下面的例子中，事件被委托给类“removeLink”的所有元素。点击按钮删除它的父母。

我做了一些小的修改，使其能够作为演示工作。最重要的部分是底部的代表（使用）。

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--; 
}); 

Answer 2

尝试添加单击处理程序是这样的：

newTextBoxDiv.Append.Html(
      '&nbsp;&nbsp;<input type="button" id='removebutton' value="Remove" class="removeLink">'); 
$('#removebutton').click(function() { 
       $('#mytable').remove(); 
       linkCounter--; 
      }); 

，给你的表 'MYTABLE' 的ID。

Answer 3

jQuery中的每个函数调用都会返回一个jQuery对象，这就是为什么您可以将多个调用串起来的原因。但它们都是基于原有对象：

这里：

newTextBoxDiv.append.html(
      '&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">').click(function() { 
       $(this).remove(); 
       linkCounter--; 
      }); 

要附加类型的按钮到div的输入。但是接下来你要在新的TextBoxDiv元素上设置点击事件，,而不是这个按钮。

创建按钮，添加点击功能，然后将其追加：

$('&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">') 
    .click(function() { 
       $(this).siblings('table').remove(); 
       linkCounter--; 
    }).appendTo(newTextBoxDiv);