Question

HTML：

<form role="form" action="/wohoo" method="POST">
 <label>Stuff</label>
   <div class="multi-field-wrapper">
     <div class="multi-fields">
       <div class="multi-field">
         <input type="text" name="stuff[]">
         <button type="button" class="remove-field">Remove</button>
       </div>
     </div>
     <button type="button" class="add-field">Add field</button>
  </div>
</form>

Jquery的：

$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
    $('.multi-field:first-child', wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    $('.multi-field .remove-field', $wrapper).show();
});
$('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1) {
        $(this).parent('.multi-field').remove();
    }
    adjustButtonVisiblity();
});

adjustButtonVisiblity();
function adjustButtonVisiblity() {
    if ($('.multi-field', $wrapper).length == 1) {
          $('.multi-field .remove-field', $wrapper).hide();
    }
  }
});

我有html页面，其中包含带输入字段的div。 div还包含一个添加按钮，它克隆当前输入字段并将其附加到div，以便我可以根据用户需要拥有尽可能多的输入字段。我也在输入字段旁边有一个删除按钮，但问题是我只需要删除最后添加的输入字段到div的按钮。任何帮助表示赞赏。

Answer 1

在添加和删除字段时，您可以检查实际上有多少字段（就像您已在adjustButtonVisiblity中执行的那样）。如果您有多个字段，则可以显示最后一个删除按钮。

    function adjustButtonVisiblity() {
            $('.multi-field .remove-field').hide();
            if ($('.multi-field').length > 1)
              $('.multi-field:last-child .remove-field').show();

    }

现在你应该调用这个函数也是一个添加按钮。

以下是JS Bin的工作示例：http://jsbin.com/wegenuveza/edit?html,js,output

仅使用clone（）在最近添加的输入字段上删除按钮

1 个答案: