jquery - 单击.close 时如何使元素帮助可见？

Question

我的代码 - Fiddle

// clone item
$(document).on('click', '.add-item', function() {

  var lastItem = $(this).parents('.container').find('.item-origin').last();
  $(this).parents('.item-help').hide();

  var newItem = lastItem.clone().insertAfter(lastItem);

});

// close item
$(document).on('click', '.close', function(e) {
  e.preventDefault();

  $(this).closest('.item-origin').remove();

  $('.item-help').each(function() {
    if ($(this).is(':hidden')) {
      $(this).show();
    }
  });

});

.row {
  display: flex;
  padding: 15px;
  border: 1px solid #ccc;
}

.item {
  border: 1px solid #ccc;
  padding: 15px;
  width: calc(100% / 3);
  text-align: center;
}

label {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}

label+label {
  margin-left: 15px;
}

.item {
  position: relative;
}

.close {
  position: absolute;
  top: -10px;
  right: 0;
  color: #fff;
  background: #f00;
  font-size: 10px;
  padding: 5px;
}

.item:first-of-type .close {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="item item-origin">
      <a href="javascript:void(0)" class="close">Close</a> Block origin
    </div>
    <div class="item item-help">
      <a href="javascript:void(0)" class="add-item">Add Item 2</a>
    </div>
    <div class="item item-help">
      <a href="javascript:void(0)" class="add-item">Add Item 3</a>
    </div>
  </div>
</div>

当我单击Add Item 2 和Additem 3 时，使 block item-help 不可见

当点击克隆元素的.close时，只出现一个 block

最多可以是三个 block 。

现在如此(4 block )

如何正确实现？

据我了解最有可能出现在这段代码中的问题

$('.item-help').each(function() {
        if ($(this).is(':hidden')) {
          $(this).show();
        }
  });

我很乐意提供任何帮助

感谢

Answer 1

试试这个...我改变了新的元素插入位置和关闭按钮点击功能

$(document).on('click', '.add-item', function() {

  var lastItem = $(this).parents('.container').find('.item-origin').last();
  $(this).parents('.item-help').hide();

  var newItem = lastItem.clone().insertBefore($(this).parents('.item'));
  
});

// close item
$(document).on('click', '.close', function(e) {
  e.preventDefault();
 
  $(this).closest('.item-origin').next().show();
  $(this).closest('.item-origin').remove(); 
 
  
});

.row {
  display: flex;
  padding: 15px;
  border: 1px solid #ccc;
}

.item {
  border: 1px solid #ccc;
  padding: 15px;
  width: calc(100% / 3);
  text-align: center;
}

label {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}

label+label {
  margin-left: 15px;
}

.item {
  position: relative;
}

.close {
  position: absolute;
  top: -10px;
  right: 0;
  color: #fff;
  background: #f00;
  font-size: 10px;
  padding: 5px;
}

.item:first-of-type .close {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="item item-origin">
      <a href="javascript:void(0)" class="close">Close</a>
      Block origin
    </div>
    <div class="item item-help">
      <a href="javascript:void(0)" class="add-item">Add Item 2</a>
    </div>
    <div class="item item-help">
      <a href="javascript:void(0)" class="add-item">Add Item 3</a>
    </div>
  </div>  
</div>