將元素動態添加到頁面，然後將其刪除

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