javascript - jQuery:按钮添加和删除最近

Question

我有一个 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 行旁边添加行并只删除该行。

Answer 1

要实现这一点，您需要使用委托(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();
});

Example fiddle