javascript - 使用 jquery 动态添加和删除 div

Question

大家好，我被这个问题困扰了。添加工作正常，删除不起作用。我可以提醒数字，但选择不起作用。我刚刚添加了删除功能。 我已经修改了它，它可以工作，谢谢

    <script>
            $(function () {
                // Handler for .ready() called.
                lastPassengerID = $('.passengersInsert').children().last().attr('class');
            });
            //addPassenger();
// A $( document ).ready() block.
            function addPassenger() {
                var passengers = $('.passengersInsert').children().length;
                if (passengers > 1) {
                    //var lastPassengerID = $('.passengersInsert').children().last().attr('class');
                    //var id = $('.passengersInsert').children().attr('id');
                    lastPassengerID = parseInt(lastPassengerID.replace('P', ''));
                } else {
                    lastPassengerID = 0;
                }

                if (passengers === 0) {
                    //alert('passengers' + passengers);
                    $(".checkbox1").remove();
                }

                var seqNo = passengers + 1;
                if (seqNo > 1) {
                    var defaultText = "PASSENGER NO " + seqNo + "";
                } else {
                    defaultText = "LEAD PASSENGER";
                }

                //alert('last ID' + lastPassengerID);

                var template = '<div class="P' + seqNo + '"><div id="' + seqNo + '" class="panel panel-default"><div class="panel-heading">' + defaultText + '<div class="col-xs-2 row pull-right" id="addRemove"><input id="neg" class="col-xs-5 pull-left" type="button" value="-" onclick="removePassenger('+ seqNo +')"> <input id="pos" class="col-xs-5" type="button" value="+" onclick="addPassenger()"></div></div><br/><div class="row">';
                template += '<div id="C' + seqNo + '" class="col-xs-12" style="/*border:1px solid blue;*/"><div class="col-xs-12" style="/*border: 1px solid green;*/">';
                template += '<div class="row"><em><h5 class="col-xs-12" >Contact Details</h5></em></div><br/></div>';
                template += '<div class="col-xs-12"><div class="col-sm-6 col-xs-12 pull-left" style="/*border: 1px solid red;*/"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span><input type="text" class="form-control" placeholder="First Name" name="FName' + seqNo + '"></div></div>';
                template += '<div class="col-sm-6 col-xs-12 pull-right"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-user"></span> </span><input type="text" class="form-control" placeholder="Last Name" name="SName' + seqNo + '"></div></div>&nbsp;</div><div class=" col-xs-12">';
                template += '<div class="row"><div id="C' + seqNo + '" class=" col-xs-12"><div class="col-xs-12"><div class="row"><em><h5 class="col-xs-12">Address</h5></em></div><div class="checkbox' + seqNo + '"><label class="row col-xs-12 "><input type="checkbox" class="checkbox' + seqNo + ' col-xs-1" name="PAddress' + seqNo + '" id="PAddress' + seqNo + '" value=""> Same as Lead Passenger </label></div></div></div></div>';
                template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12 pull-left"><div class="input-group col-xs-12"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="number" class="form-control" placeholder="Door No." name="DoorNumber' + seqNo + '"></div></div>';
                template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Street Name" name="Road' + seqNo + '"></div></div></div></div><br/>';
                template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Town /City" name="Town' + seqNo + '"></div></div>';
                template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Post Code /Zip Code" name="PostCode' + seqNo + '"></div></div></div></div><br/>';
                template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="County/State" name="County' + seqNo + '"></div></div><div class="col-sm-6 col-xs-12">';
                template += '<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-globe"></span></span><input type="text" class="form-control" placeholder="Country" name="Country' + seqNo + '"></div></div></div></div><br/>';
                template += '<div class="row"><div class="col-xs-12"><div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-earphone"></span></span><input type="text" class="form-control" placeholder="Contact No" name="Tel' + seqNo + '"></div></div>';
                template += '<div class="col-sm-6 col-xs-12"><div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span><input type="text" class="form-control" placeholder="Email" name="Email' + seqNo + '"></div></div></div></div><br/></div></div></div></div></div>';

                //$('.passengersInsert').append(template);
                $(template).appendTo('.passengersInsert');
                $(".checkbox1").remove();
                $('.P' + seqNo).css('border', '1px solid red');
            }
            //var id = $('div').attr('id');
            function removePassenger(seqNo) {
                $('.P' + seqNo).remove(); /*nothing happens*/
                $('.P' + seqNo).css('border', '1px solid blue');/*this highlights the '-' buttons margin. instead of the expected element.*/
            }
        </script>

Answer 1

您的代码中有两个问题:

1) 变量 lastPassengerID 是在 addPassenger 函数内部定义的，因此绑定(bind)到其范围。该变量在 addPassenger 函数之外不可用，因此在 removePassenger 函数内未定义。

要在 removePassenger 函数中按照您的预期使用它，您需要在两个函数都属于的作用域中声明该变量，或者在打开 之前将其声明为全局变量addPassenger 函数。

2) removePassenger 函数的第一行确实包含编码错误:

$('P+lastPassengerID+').remove();

应该是

$('.P'+lastPassengerID).remove();

因此，lastPassengerID 的内容实际上与字符串“P”组合，从而产生有效的选择器。此外，您需要在选择器的开头添加一个点 (.)，以将选择器标识为类选择器，以便它实际上与类匹配。