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

要实现这一点，您需要使用委托事件处理程序，因为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

Answer 2

找到你的行，克隆它，追加它。

$('.button').on('click', function() {
    var row = $(this).closest('.test-guided-search-row').clone();
    $('.parent-wrapper').append(row);
})

找到你的行，删除它。删除

$('.button').on('click', function() {
    var row = $(this).closest('.test-guided-search-row').remove();
})

//您需要定义哪个按钮是+按钮是什么 - 具有类名

Answer 3

$('.parent-wrapper').on('click', '.btn-add', function() {
    var row = $(this).closest('.test-guided-search-row').clone();
    $(this).closest('.test-guided-search-row').after(row);
}).on('click', '.btn-delete', function() {
    $(this).closest('.test-guided-search-row').remove();
});

这正是解决我的问题的原因。我想附加到最近的按钮点击行。

Answer 4

如果您希望能够在特定div行旁边添加行并仅删除该行，则需要添加一个数字作为每个

的ID

这可能会有所帮助：通过

$(this).closest('.new-wrapper')[0].id

单击+按钮时

添加row（rowId）。

function addRow(rowId){
  var next = rowId+1;
  $(".parent-wrapper #rowId").after('<div id="'+next+'" class = "new-wrapper"> $(".test-guided-search-row").html() </div>);
}

jQuery：按钮添加和删除最近的

4 个答案: