我有一个 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 行旁边添加行并只删除该行。
最佳答案
要实现这一点,您需要使用委托(delegate)事件处理程序,因为 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();
});
关于javascript - jQuery:按钮添加和删除最近,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31031611/