Hinzufügen und Entfernen von divs dynamisch mit jquery

Question

Hallo Leute, ich habe mit diesem festgefahren. Das Hinzufügen funktioniert gut, das Entfernen funktioniert nicht. Ich kann die Zahlen alarmieren, aber die Auswahl ist nicht Arbeit. Ich habe gerade die Entfernungsfunktion hinzugefügt. das ich habe es geändert und es funktioniert dank

<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

Es gibt zwei Probleme im Code:

1) Die Variable lastPassengerID ist innerhalb der addPassenger Funktion definiert und daher ihren Umfang gebunden. Die Variable ist nicht verfügbar außerhalb der addPassenger Funktion und daher undefined innerhalb der removePassenger Funktion.

, es zu benutzen, wie Sie in der removePassenger Funktion beabsichtigen Sie die Variable in einem Umfang zu erklären, müssen beide Funktionen Teil sind oder einfach als globale Variable Recht erklären, bevor Sie die addPassenger Funktion öffnen.

2) Die erste Zeile Ihrer removePassenger Funktion macht einen Codierungsfehler enthalten:

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

sollte

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

so die Inhalte von lastPassengerID sind tatsächlich mit der Zeichenkette „P kombiniert "was zu einem gültigen Selektor führt. Außerdem müssen Sie am Anfang des Selektors einen Punkt (.) hinzufügen, um den Selektor als Klassenselektor zu identifizieren, damit er tatsächlich einer Klasse entspricht.