Question

我的代码有问题。即使我有两个或更多部分，我也无法点击＆＃34;删除按钮＆＃34;删除部分。

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

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

删除后重复部分失败

3 个答案: