jquery - 使用 jQuery .remove() 仅删除第一个列表项

Question

我有一个简单的表单，允许某人添加/删除额外的电话号码。由于某种原因，我看不到 Javascript 中的错误。用户可以毫无问题地将新号码添加为列表项——每个列表项都有一个用于删除列表项的按钮。如果用户单击第一个列表项删除按钮，则该项目将被删除。使用 JS 添加的列表项不会从页面中删除。

这看起来很简单，但我却被难住了。在过去的两个小时里，我在 stackoverflow 和 google 上进行了多次搜索，试图解决这个问题。我知道问题解决后我会觉得很傻，但我需要一些帮助。

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>

JS

$(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 Bin 上有一个示例设置 http://jsbin.com/omanij/1/edit

Answer 1

您的选择器仅将事件绑定(bind)到您查找时存在的元素。使用事件委托(delegate)来匹配稍后出现的事件:

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