如何刪除以JavaScript動態添加元素

我有下面的代碼當用戶按下ADD按鈕，它會創建一些元素如何刪除以JavaScript動態添加元素

<div id="parent"> 
    <div id="block_1" > 
     <div> 
      <input type="text"> 
     </div> 
     <img src="arrow.jpg"> 
     <div> 
      <input type="text"> 
     </div> 
     <div><a href="#" class="remove_block">Remove</a></div> 
    </div> 
</div>

的結果看起來是這樣 enter image description here

到一個JavaScript函數並創建相同的div塊。這裏是代碼

function add_block() { 
var curDiv = $('#parent'); 
var i = $('#parent div').size()/4 + 1; 
var newDiv='<div id="block_'+ i + '" class="parent_div">' + 
'<div>' + 
'<input type="text">' + 
'</div>' + 
'<img src="arrow.jpg">' + 
'<div>' + 
'<input type="text">' + 
'</div><div><a class="remove_block" href="#">Remove</a></div>' + 
'</div>'; 
$(newDiv).appendTo(curDiv); 
};

無論何時用戶按下塊的左側的「刪除」鏈接，該相應的塊應該被刪除。這就是我所做的：

$('a.remove_block').on('click',function(events){ 
    $(this).parents('div').eq(1).remove(); 
});

問題是隻有在原始塊中刪除工作，其餘都沒有。任何人都知道爲什麼？ enter image description here

我是新來的jQuery和JavaScript，所以我真的很感謝所有幫助和建議注：我使用jQuery 2.0.3

來源

2013-10-02 Nexus

因爲它是動態的內容，你不能綁定事件，如靜態內容通過選擇進行評估，也不會綁定到元素，因爲它們不會出現在你綁定的時間。

所以，你應該綁定事件是這樣的：

$('#parent').on('click', 'a.remove_block', function(events){ 
    $(this).parents('div').eq(1).remove(); 
});

來源

2013-10-02 04:05:33 Chokchai

感謝它就像一個魅力:)） – Nexus

你算這應該是綁定任何和所有點擊鏈接的標準做法？ – Austin

您需要使用事件代表團動態地添加元素。即使您使用了.on()，但所使用的語法不會使用事件委派。

當你註冊一個普通的事件時，它只會把這個處理程序添加到那個時間點上存在於dom中的那些元素，但是當使用事件委託時，處理程序被註冊到執行時存在的元素，當事件被冒泡高達元素

$(document).on('click', '.remove_block', function(events){ 
    $(this).parents('div').eq(1).remove(); 
});

來源

2013-10-02 04:05:14

-2

您可以使用此.live：

$('body').live('click','#idDinamicElement', function(){ 
    // your code here 
});

來源

2013-10-02 04:05:44

$('a.remove_block').on('click',function(events){ 
    $(this).parents('.parent_div').remove(); 
    return false; 
});

來源

2013-10-02 04:07:00 Adrian

如何刪除以JavaScript動態添加元素

回答

相關問題