使用jQuery .remove（）僅刪除第一個列表項

我有一個簡單的表單，它允許某人添加/刪除額外的電話號碼。出於某種原因，我無法在Javascript中看到錯誤。用戶可以添加新的數字作爲列表項沒有任何問題 - 每個列表項都有一個按鈕來刪除列表項。如果用戶點擊第一個列表項刪除按鈕，則刪除該項目。沒有任何與JS一起添加的列表項目將從頁面中刪除。使用jQuery .remove（）僅刪除第一個列表項

這似乎很簡單，但我很難過。我花了最近兩個小時試圖解決這個在stackoverflow和谷歌搜索。我知道在解決問題時我會感到無聊，但我可以用一些幫助。

HTML

<ul class="telRow"> 
    <li id="telid_1234"> 
    ONE <button class="telRowRemove">-</button> 
    </li> 
</ul> 

<div> 
    <button class="telRowAdd">+</button> 
</div> 

<div id="errors">No errors</div> 

<div class="emptyTel" style="display: none;"> 
<input type="text" name="tel_no[]" /> 
<button class="telRowRemove">-</button> 
</div>

$(document).ready(function(){ 

    $('.telRowAdd').on('click', function() { 
    var Container = $('ul.telRow'); 
    var newrow = '<li>ONE <button class="telRowRemove">-</button></li>'; 
    Container.append(newrow); 
     $('#errors').text('Added'); 
    }); 

    $('.telRowRemove').click(function() { 
     $(this).parent('li').remove(); 
     $('#errors').text('Removed'); 
    }); 
});

刪除按鈕具有一類.telRowRemove的，所以在按鈕上單擊理論會觸發$（ 'telRowRemove'） .click，但它只對頁面上的原始列表項目執行此操作，而不是其他列表項目。

我對JS斌設置示例這裏http://jsbin.com/omanij/1/edit

來源

2013-03-25 Out of Control

你的選擇只有結合該事件，當你看他們存在的元素。使用事件代表團與出現後來的那些：

$('#parent_of_tel_rows').on('click', '.telRowRemove', function() { 
    $(this).parent('li').remove(); 
    $('#errors').text('Removed'); 
});

來源

2013-03-25 03:42:49 Blender

輝煌！謝謝Blender，這很有用。使用術語「事件代表團」我現在也明白了爲什麼。 – 2013-03-25 03:53:23

您的以下按鈕將無法正常工作的原因是因爲他們是動態添加到DOM，並且，綁定的click事件將不會觸發爲將來的元素。

改爲使用.on()，它將確保將來的元素也被綁定。

這裏查看更新的例子：http://jsbin.com/omanij/5/edit

來源

2013-03-25 03:47:46 Kagawa

謝謝香川。我曾嘗試.on（）以前沒有成功。攪拌器的解釋對我的問題稍微更加準確。 – 2013-03-25 03:56:52

看我的例子，它的工作。無論如何，很高興你現在找到了答案。 – Kagawa 2013-03-25 04:11:41

你可以找到工作在以下型號的jsfiddle：

http://jsfiddle.net/btjcz/

$('.telRowAdd').on('click', function() { 
     var Container = $('ul.telRow'); 
     var newrow = $('<li>ONE </li>'); 
     var btnRemove = $('<button class="telRowRemove">-</button>'); 

     btnRemove.click(function() { 
      $(this).parent('li').remove(); 
      $('#errors').text('Removed'); 
     }); 
     newrow.append(btnRemove); 



     Container.append(newrow); 
     $('#errors').text('Added'); 
    });

來源

2013-03-25 03:59:34 Sangeeta

使用jQuery .remove（）僅刪除第一個列表項

回答

相關問題