我有一个HTML,如下所示:
<div class="parent-wrapper">
<div class="test-guided-search-row">
<select class="form-control test-guided-search-row-select-bool-query">
<option>AND</option>
</select>
<select class="form-control test-guided-search-row-select-query-path">
<option>ALL</option>
</select>
<select class="form-control test-guided-search-row-query-type">
<option>abcd</option>
<option>efg</option>
</select>
<input class="form-control" type="text">
<button class="btn btn-primary btn-sm" type="button" data-button-action="addRow">+</button>
<button class="btn btn-primary btn-sm" type="button" data-button-action="deleteRow">-</button>
</div>
</div>
我怎样才能使按钮+在单击按钮所在的div旁边添加整行
div
?我遇到了麻烦,因为这些行div有多个,并且我希望能够在该div行旁边添加行并仅删除该行。 最佳答案
为此,您需要使用委托事件处理程序,因为button
元素将动态添加到DOM。在这里,您可以使用closest()
查找行,分别使用clone()
和append()
或remove()
。
首先,将类添加到按钮以使其更容易识别:
<button class="btn btn-primary btn-sm btn-add" type="button" data-button-action="addRow">+</button>
<button class="btn btn-primary btn-sm btn-delete" type="button" data-button-action="deleteRow">-</button>
然后,您可以将事件附加到它们:
$('.parent-wrapper').on('click', '.btn-add', function() {
$(this).closest('.test-guided-search-row').clone().appendTo('.parent-wrapper');
}).on('click', '.btn-delete', function() {
$(this).closest('.test-guided-search-row').remove();
});
Example fiddle
关于javascript - jQuery:按钮添加和删除最接近的,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31031611/