jQuery按順序刪除附加的div元素

Question

我正在創建一個註冊表單，用戶可能需要輸入多達10個導演的詳細信息。我只想顯示一組導演問題，如果需要，用戶可以點擊'+導演'添加更多細節。

此附加div到.director_wrapper（工作正常）。但是，我還想包含一個刪除按鈕，以防將太多導演類添加到父元素。

我的代碼到目前爲止刪除了一個div，當'-director'按鈕被點擊但我不明白爲什麼它只能刪除一個，並且不會在點擊時繼續刪除其他的。

var director = $('.director'); 
 
    var dirClone = $('.director').html(); 
 
    var wrapper  = $('.director_wrapper'); 
 
    var count  = 1; 
 
    var maxField = 10; 
 
    var removeBtn = $('.remove_dir'); 
 
    
 
    
 
    
 
    
 
    $('.add_dir').on('click', function(e){ 
 
     e.preventDefault; 
 
     if(count < maxField){ 
 
      $(wrapper).append(dirClone); 
 
      count ++; 
 
      $(removeBtn).removeClass('disabled'); 
 
     }; 
 
     
 
    }); 
 

 
    
 
    $(removeBtn).click('click', function(e){ 
 
     e.preventDefault; 
 
     $('.director_wrapper div.director:last').remove(); 
 
     count--; 
 
     console.log(count); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="director_wrapper"> 
 
     <div class="row break dir_btn"> 
 
      <hr> 
 
      <h2>Director Details</h2> 
 
      <button type="button" class="btn add_dir"><strong>+ director</strong></button> 
 
      <button type="button" class="btn remove_dir disabled"><strong>- director</strong></button> 
 
     </div> 
 
<div class="director"> 
 
     <label for="exampleInputPassword1">Director</label> 
 
     <div class="form-inline"> 
 
      
 
     <div class="form-group"> 
 
      <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 1"> 
 
     </div> 
 
      <div class="form-group"> 
 
      <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 2"> 
 
     </div> 
 
     <div class="form-group"> 
 
      
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Line 3"> 
 
     </div> 
 
     <div class="form-group"> 
 
      
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="City"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Country"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Postcode or equivalent"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Phone Number"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Email"> 
 
     </div> 
 
     
 
    
 
     </div> 
 
     
 
</div> <!-- close director div --> 
 
    
 
</div> <!-- close director_wrapper div -->

Answer 1

的問題是你的第二個行：$('.director').html();。 .html()只能獲得元素的HTML內部內部。有一個稱爲outerHTML一個DOM屬性，您可以改用以得到正確的HTML

var director = $('.director'); 
 
    var dirClone = $('.director').prop('outerHTML'); 
 
    var wrapper  = $('.director_wrapper'); 
 
    var count  = 1; 
 
    var maxField = 10; 
 
    var removeBtn = $('.remove_dir'); 
 
    
 
    
 
    
 
    
 
    $('.add_dir').on('click', function(e){ 
 
     e.preventDefault; 
 
     if(count < maxField){ 
 
      $(wrapper).append(dirClone); 
 
      count ++; 
 
      $(removeBtn).removeClass('disabled'); 
 
     }; 
 
     
 
    }); 
 

 
    
 
    $(removeBtn).click('click', function(e){ 
 
     e.preventDefault; 
 
     $('.director_wrapper div.director:last').remove(); 
 
     count--; 
 
     console.log(count); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="director_wrapper"> 
 
     <div class="row break dir_btn"> 
 
      <hr> 
 
      <h2>Director Details</h2> 
 
      <button type="button" class="btn add_dir"><strong>+ director</strong></button> 
 
      <button type="button" class="btn remove_dir disabled"><strong>- director</strong></button> 
 
     </div> 
 
<div class="director"> 
 
     <label for="exampleInputPassword1">Director</label> 
 
     <div class="form-inline"> 
 
      
 
     <div class="form-group"> 
 
      <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 1"> 
 
     </div> 
 
      <div class="form-group"> 
 
      <input type="email" class="form-control custom-address" id="exampleInputEmail3" placeholder="Line 2"> 
 
     </div> 
 
     <div class="form-group"> 
 
      
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Line 3"> 
 
     </div> 
 
     <div class="form-group"> 
 
      
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="City"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Country"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Postcode or equivalent"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Phone Number"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control custom-address" id="exampleInputPassword3" placeholder="Email"> 
 
     </div> 
 
     
 
    
 
     </div> 
 
     
 
</div> <!-- close director div --> 
 
    
 
</div> <!-- close director_wrapper div -->