我有一个简单的表单,允许某人添加/删除额外的电话号码。由于某种原因,我看不到 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
最佳答案
您的选择器仅将事件绑定(bind)到您查找时存在的元素。使用事件委托(delegate)来匹配稍后出现的事件:
$('#parent_of_tel_rows').on('click', '.telRowRemove', function() {
$(this).parent('li').remove();
$('#errors').text('Removed');
});
关于jquery - 使用 jQuery .remove() 仅删除第一个列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15607247/