用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函數中定義的，因此必然會其範圍。該變量是而不是功能外addPassenger功能和因此undefined功能removePassenger內。

要在removePassenger函數中使用它，您需要在範圍中聲明該變量，這兩個函數都是其中的一部分，或者只是在打開addPassenger函數之前將其聲明爲全局變量。

2） 您removePassenger功能的第一行確實包含一個編碼錯誤：

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

應該

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

所以lastPassengerID的內容實際上與字符串「P組合「這導致了一個有效的選擇器。此外，您需要在選擇器的開始處添加一個點（.），以將選擇器標識爲類選擇器，以便它實際上匹配類。