我有一个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/

10-13 00:11
查看更多