使用按钮单击删除div行 [英] Removing a div row using button click

问题描述

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

I have div row with some controls on it. I have add and remove button. The Add button click removes the particular row. When I try to remove the particular row only the top row gets removed , not the others.

这是小提琴: http://jsfiddle.net/4dy6g8bu/1/

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>

我的问题是

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

谢谢

推荐答案

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

Your button generated dynamic, you need change click event to

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

防止删除第一个按钮

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

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");

 $('body').on("click", '.btn.remove', function (e) {
            if($(".btn.remove").length == 1){
               return;
            }
            e.preventDefault();
            var $cloner = $(this).closest(".clone");
            //console.log("a" + $cloner);
            $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>

这篇关于使用按钮单击删除div行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！