重复部分在删除时失败

Question

我对此代码有问题。即使我有两个或多个部分，我也无法通过单击“删除按钮”删除某个部分。

任何人都可以看到错误是什么？

http://jsfiddle.net/4vs93yq3/

// Add a new repeating section 
var attrs = ['for', 'id', 'name']; 
function resetAttributeNames(section) { 
    var tags = section.find('input, label'), idx = section.index(); 
    tags.each(function() { 
     var $this = $(this); 
     $.each(attrs, function(i, attr) { 
     var attr_val = $this.attr(attr); 
     if (attr_val) { 
      $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1))) 
     } 
     }) 
    }) 
} 

$('.addFight').click(function(e){ 
     e.preventDefault(); 
     var lastRepeatingGroup = $('.repeatingSection').last(); 
     var cloned = lastRepeatingGroup.clone(true) 
     cloned.insertAfter(lastRepeatingGroup); 
     resetAttributeNames(cloned) 
    }); 

// Delete a repeating section 
$('.deleteFight').click(function(e){ 
     e.preventDefault(); 
     var current_fight = $(this).parent('div'); 
     var other_fights = current_fight.siblings('.repeatingSection'); 
     if (other_fights.length === 0) { 
      alert("You should atleast have one item"); 
      return; 
     } 
     current_fight.slideUp('slow', function() { 
      current_fight.remove(); 

      // reset fight indexes 
      other_fights.each(function() { 
       resetAttributeNames($(this)); 
      }) 

     }) 


    }); 

这里是我的HTML

<div class="repeatingSection"> 
         <section class="panel"> 
          <header class="panel-heading"> 
          Item information 
          <div class="pull-right"><a href="#" class="btn btn-danger btn-sm deleteFight"><i class="fa fa-trash-o"></i>Remove</a></div> 
          </header> 
          <div class="panel-body"> 
           <div class="form">          
            <div class="form-group "> 
             <label for="itemnumber_1" class="control-label col-lg-2">Itemnumber</label> 
             <div class="col-lg-10"> 
              <input class=" form-control" id="itemnumber_1" name="itemnumber_1" type="text" /> 
             </div> 
            </div> 
            <div class="form-group "> 
             <label for="quantity_1" class="control-label col-lg-2">Quantity</label> 
             <div class="col-lg-10"> 
              <input class=" form-control" id="quantity_1" name="quantity_1" type="text" /> 
             </div> 
            </div> 
            <div class="form-group "> 
             <label for="reason_1" class="control-label col-lg-2">Reason for return</label> 
             <div class="col-lg-10"> 
              <textarea class=" form-control" id="reason_1" name="reason_1"></textarea> 
             </div> 
            </div> 

           </div> 
          </div> 
         </section> 
         </div> 

         <section class="panel"> 

          <div class="panel-body"> 
           <div class="form">          
             <div class="form-group"> 
              <div class="col-lg-offset-2 col-lg-10"> 
               <a href="#" class="btn btn-info addFight"><i class="fa fa-plus"></i> One more item</a> 
              </div> 
             </div> 
           </div> 
          </div> 
         </section> 

Answer 1

在这里你去。检查更详细的解释内嵌的意见和检查DEMO here

// Delete a repeating section 
$('.deleteFight').click(function(e){ 
     e.preventDefault(); 
     var current_fight = $(this).parent('div'); 
     var other_fights = current_fight.closest('.repeatingSection').siblings(); 
     //get all repeatingSection using closest and getting the current repeatingSection's sublings 
     if (other_fights.length === 1) { //check if there is only one element 
      alert("You should atleast have one item"); 
      return; 
     } 
     current_fight.closest('.repeatingSection').slideUp('slow', function() { 
      current_fight.closest('.repeatingSection').remove(); 
      //remove current clicked element's parent using closest 

      // reset fight indexes 
      other_fights.each(function() { 
       resetAttributeNames($(this)); 
      }) 
    }) 
}); 

Answer 2

删除代码看起来的删除链接的父DIV。然而父母不是重复部分，而是pull-right div。这可以通过使用类似解决：

var current_fight = $(this).closest('div.repeatingSection'); 

Fiddle

Answer 3

 // Add a new repeating section 
var attrs = ['for', 'id', 'name']; 
function resetAttributeNames(section) { 
    var tags = section.find('input, label'), idx = section.index(); 
    tags.each(function() { 
     var $this = $(this); 
     $.each(attrs, function(i, attr) { 
     var attr_val = $this.attr(attr); 
     if (attr_val) { 
      $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1))) 
     } 
     }) 
    }) 
} 

$('.addFight').click(function(e){ 
     e.preventDefault(); 
     var lastRepeatingGroup = $('.repeatingSection').last(); 
     var cloned = lastRepeatingGroup.clone(true) 
     cloned.insertAfter(lastRepeatingGroup); 
     resetAttributeNames(cloned) 
    }); 

// Delete a repeating section 
$('.deleteFight').click(function(e){ 
     e.preventDefault(); 
     var current_fight = $(this).closest('.repeatingSection'); 
     var other_fights = current_fight.siblings('.repeatingSection'); 
     var fights = $('.repeatingSection') ? $('.repeatingSection').length : 0; 
     if (fights <= 1) { 
      alert("You should atleast have one item"); 
      return; 
     } 
     current_fight.slideUp('slow', function() { 
      current_fight.remove(); 

      // reset fight indexes 
      other_fights.each(function() { 
       resetAttributeNames($(this)); 
      }) 

     }) 


    }); 

，而不是寻找兄弟姐妹，你只需检查是否有超过1打;而不是删除按钮的父div（类拉右），而不是删除父块类.repeatingsection