Question

我的div行上有一些控件。我有添加和删除按钮。单击添加按钮将删除特定的行。当我尝试删除特定的行时，只会删除最上面的行，而不删除其他行。

var $addButton = $(".btn.add");
$addButton.on("click", function(e) {
    e.preventDefault();
    var $cloner = $(this).closest(".clone");    
    $cloned.clone(true, true).insertAfter($cloner);
});
var $cloned = $('.clone').clone(true, true);

var $removeButton = $(".btn.remove");

 $removeButton.on("click", function (e) {
            e.preventDefault();
            var $cloner = $(this).closest(".clone");
            $cloner.remove();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="clone-container">
    <div class="clone">
        <label for="select1">Select 1</label>
        <select id="select1" name="select1" class="">
            <option>Select One:</option>
            <option value="1">1</option>
        </select>
        <span class="controls">
            <a href="#" class="btn add">+</a>
            <a href="#" class="btn remove">−</a>
        </span>
    </div>
</div>

我的问题是

如何在每次单击按钮时删除相应的行。
如果只有一行，则需要限制删除按钮。

谢谢

Answer 1

您的按钮动态生成，您需要将click事件更改为

\n

防止删除第一个按钮

chomp

$('body').on("click", '.btn.remove', function (e) {

if($(".btn.remove").length == 1){ return; }

Answer 2

请尝试使用此代码。它对我有用。

HTML

<div id="clone-container">
<div class="clone">
    <label for="select1">Select 1</label>
    <select id="select1" name="select1" class="">
        <option>Select One:</option>
        <option value="1">1</option>
    </select>
    <span class="controls">
        <a href="#" class="btn add">+</a>
        <a href="#" class="btn remove">−</a>
    </span>
</div>

Js

var $addButton = $(".btn.add");
$addButton.on("click", function(e) {
   e.preventDefault();
   var $cloner = $(this).closest(".clone");    
   $cloned.clone(true, true).insertAfter($cloner);
 });
 var $cloned = $('.clone').clone(true, true);

 var $removeButton = $(".btn.remove");

 $("#clone-container").on('click', '.btn.remove',function (e) {
        e.preventDefault();
        var $cloner = $(this).closest(".clone");

        var count = $("#clone-container .clone").length;
        if(count > 1)
        {
           $cloner.remove();
        }


     } )

使用按钮单击删除div行

2 个答案: