Question

我已经通过克隆动态创建了div，我有删除按钮，当我点击相应潜水需要删除的删除按钮时，下面的代码没有按预期工作。如果我添加了3个div并点击了删除按钮它正在删除所有被点击的div

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <form class="form-horizontal" role="form">
                <div id="0" class="address"> 
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Address Line1</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Address Line2</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">City</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">State</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Post Code</label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-remove-sign"></i>Remove</button>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>
                        <button class="btn btn-success btn-add"><i class="glyphicon glyphicon-floppy-save"></i>Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Java脚本

var id = 0;
$(".btn-add").click(function (event) {
    event.preventDefault();
    var cloneId = $('#' + id);

    //cone to new Address form
    var newAddressForm = cloneId.clone();
    //increase id
    id++;
    // change Id of new form
    newAddressForm.attr("id", id);

    //set input val to null/empty
    newAddressForm.find('input').val('');
    newAddressForm.insertAfter(cloneId);
});

$(".address input:button").click(function (event) {
    event.preventDefault();

    $(this).parent('div').remove();
});

Answer 1

此代码有效

 var id = 0;
$(".btn-add").click(function (event) {
    event.preventDefault();
    var cloneId = $('#' + id);

    //cone to new Address form
    var newAddressForm = cloneId.clone(true);
    //increase id
    id++;
    // change Id of new form
    newAddressForm.attr("id", id);

    //set input val to null/empty
    newAddressForm.find('input').val('');
    newAddressForm.insertAfter(cloneId);
});

$(".btn-remove").click(function(e){
    e.preventDefault();
    $(this).closest('.address').remove();
});

Answer 2

我修复了以下解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <form class="form-horizontal" role="form">
                    <div id="0" class="address">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Address Line1</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Address Line2</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">City</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">State</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Post Code</label>
                            <div class="col-sm-10">
                                <input class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus-sign"></i>Add</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button class="btn btn-success"><i class="glyphicon glyphicon-floppy-save"></i>Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script>
        var id = 0;
        $(document).on('click', '.btn-add', function (event) {
            event.preventDefault();

            var field = $(this).closest('.address');
            var field_new = field.clone();

            $(this)
                .toggleClass('btn-default')
                .toggleClass('btn-add')
                .toggleClass('btn-danger')
                .toggleClass('btn-remove')
                .html('<i class="glyphicon glyphicon-remove-sign"></i>Remove');

            field_new.find('input').val('');
            field_new.insertAfter(field);
        });
        $(document).on('click', '.btn-remove', function (event) {
            event.preventDefault();
            $(this).closest('.address').remove();
        });
    </script>
</body>
</html>

jquery动态删除div

2 个答案: