Javascript 使用jquery动态添加和删除div

嗨，伙计们，我受够了。添加工作正常，但删除不起作用。我可以提醒数字，但选择不起作用。我刚刚添加了remove函数。 这个我已经修改过了，很好用，谢谢

    <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>

$（函数（）{
//调用了.ready（）的处理程序。
lastPassengerID=$（'.passengersInsert'）.children（）.last（）.attr（'class'）；
});
//添加乘客（）；
//$（document）.ready（）块。
函数addPassenger（）{
var passengers=$（'.passengersInsert'）.children（）.length；
如果（乘客>1）{
//var lastPassengerID=$（'.passengersInsert'）.children（）.last（）.attr（'class'）；
//变量id=$（'.passengersInsert'）.children（）.attr（'id'）；
lastPassengerID=parseInt（lastPassengerID.replace（'P'，''）；
}否则{
lastPassengerID=0；
}
如果（乘客===0）{
//警报（“乘客”+乘客）；
$（“.checkbox1”）.remove（）；
}
var seqNo=乘客+1；
如果（序号>1）{
var defaultText=“乘客编号”+序号+”；
}否则{
defaultText=“主要乘客”；
}
//警报（'last ID'+last passengerid）；
变量模板=“”+defaultText+”
；
模板+=''；
模板+=“联系方式
”；
模板+=''；
模板+=''；
模板+=‘与主要乘客地址相同’；
模板+=''；
模板+='
'；
模板+=''；
模板+='
'；
模板+=''；
模板+='
'；
模板+=''；
模板+='
'；
//$（'.passengersInsert'）.append（模板）；
$（模板）.appendTo（'.passengersInsert'）；
$（“.checkbox1”）.remove（）；
$（'.P'+seqNo）.css（'border'，'1px实心红色'）；
}
//变量id=$（'div'）.attr（'id'）；
功能移除乘客（序号）{
$（'.P'+seqNo）.remove（）；/*什么也不发生*/
$（'.P'+seqNo）.css（'border'，'1px纯蓝色'）；/*这将突出显示“-”按钮边距，而不是预期的元素*/
}

您的代码中有两个问题：

(一) 变量

lastPassengerID

在

addpasser

函数中定义，因此绑定到其范围。该变量在

addPassenger

功能外不可用，因此在

removePassenger

功能内其

未定义

要在
removeepassenger
函数中按您的意愿使用它，您需要在打开
addPassenger
函数之前，在两个函数都属于的范围内声明变量，或者只将其声明为全局变量

(二)
removeepassenger
功能的第一行确实包含编码错误：

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

应该是

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

因此，
lastPassengerID
的内容实际上与字符串“p”组合在一起，从而产生一个有效的选择器。此外，您需要在选择器的开头添加一个点（
），以将选择器标识为类选择器，使其实际与类匹配。
代码中存在两个问题：

(一)
变量
lastPassengerID
在
addpasser
函数中定义，因此绑定到其范围。该变量在
addPassenger
功能外不可用，因此在
removePassenger
功能内其
未定义

要在
removeepassenger
函数中按您的意愿使用它，您需要在打开
addPassenger
函数之前，在两个函数都属于的范围内声明变量，或者只将其声明为全局变量

(二)
removeepassenger
功能的第一行确实包含编码错误：

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

应该是

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

因此，
lastPassengerID
的内容实际上与字符串“p”组合在一起，从而产生一个有效的选择器。此外，您需要在选择器的开头添加一个点（
），以将选择器标识为类选择器，使其实际与类匹配。
看起来不错，添加/删除函数在哪里。代码格式大家好，知道我做错了什么吗？看起来不错，添加/删除函数在哪里。代码格式大家好，知道我做错了什么吗？谢谢费边。这帮助我找到了解决办法。我已经转载了最后的剧本。如何将您的答案标记为有用？您可以向上投票帖子，也可以单击向上投票/向下投票按钮下方的复选图标，将此答案标记为已接受答案。你甚至可以两者兼得。关于您的编辑：如果您想显示较新的代码版本，您应该始终将它们作为单独的部分添加（例如，通过“编辑：”）这样每个人都可以看到最初的问题。谢谢Fabian。这帮助我找到了解决办法。我已经转载了最后的剧本。如何将您的答案标记为有用？您可以向上投票帖子，也可以单击向上投票/向下投票按钮下方的复选图标，将此答案标记为已接受答案。你甚至可以两者兼得。关于您的编辑：如果您想显示较新的代码版本，您应该始终将它们作为单独的部分添加，并标记为这样（例如，通过“编辑：”），以便每个人都可以看到最初的问题。