Question

我将代码编写为重复行，点击＆＃34;添加＆＃34;按钮，然后单击＆＃34;删除按钮＆＃34;删除行。我的问题是，我不希望删除按钮出现在第一行，但仅在重复的行中。非常感谢任何帮助！

<div class="duplicate-sections">
 <div class="form-section">
  <input type="text" placeholder="Start Date" class="short-text-box">
  <input type="text" placeholder="End Date" class="short-text-box">
  <input type="text" placeholder="Address">
  <input type="text" placeholder="City">
  <input type="text" placeholder="Country">
  <a href="#" class="remove">- Remove</a>
 </div> <!-- End .form-section --> 
</div>  <!-- End .duplicate-sections --> 
<a class="btn btn-duplicate addsection" href="#" role="button" data-section='0'>+ Add Another</a>


var forms = [];

$('.duplicate-sections .form-section').each(function(){
  forms.push($(this).clone());                
})

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {
  var template = forms[$(this).data('section')];

  //increment
  sectionsCount++;

  //loop through each input
  var section = template.clone().find(':input').each(function(){

    //set id to store the updated section number
    var newId = this.id + sectionsCount;

    //update for label
    $(this).prev().attr('for', newId);

    //update id
    this.id = newId;

  }).end()

  //inject new section
  .appendTo($(this).prev('.duplicate-sections'));
  return false;
});

//remove section
$('.duplicate-sections').on('click', '.remove', function() {
  //fade out section
  $(this).closest('.form-section').fadeOut(300, function(){
    $(this).closest('.form-section').empty();
  });
  return false;
});

Answer 1

在CSS中，只需添加：

.form-section:first-child .remove {
  display:none;
}

使用Jquery添加和删除链接

1 个答案: