使用按钮动态添加输入字段，而不删除唯一字段上的按钮

Dynamically adding input fields with a button, without remove button on the only field

本文关键字：按钮 字段 删除 唯一 动态 添加 输入      更新时间：2023-09-26

我正在尝试使用此jsfiddle中的代码将更多字段动态加载到表单中：

$('.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).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
        $(this).parent('.multi-field').remove();
    });
});

一切正常，但问题是当只有一个字段时，"删除"按钮会保留在那里。

当只有一个字段时，我想让它看起来像这样。javascript使用clone函数。如果我删除删除按钮，则在添加更多字段时，它会从所有后续"克隆"中删除。我对javascript很陌生。当只有一个字段实例时，有没有人对如何删除"删除"按钮有建议？

您可以使用CSS隐藏"删除"按钮

CSS代码：

 .multi-field:first-child  .remove-field {
      display: none;
 }

或者你可以用js来做，为此你需要以这样的方式改变你的代码：

$('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    $(".add-field", $(this)).click(function(e) {
            var $el = $('.multi-field:first-child', $wrapper).clone(true);
        var $removeButton = $('<button type="button" class="remove-field">Remove</button>');
        $removeButton.click(function() {
          if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
            });
        $el.append($removeButton);
            $el.appendTo($wrapper).find('input').val('').focus();
    });
});

斯菲德尔

这里是复制的元素"input"，然后创建一个"按钮"的元素，该元素

是挂起的点击处理程序，然后将按钮添加到元素"input"中

看看这个简单的解决方案，它不会删除按钮，而是调整可见性。根据您的应用程序，这可能就足够了：

http://jsfiddle.net/hMJEy/1933/

$('.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();
        }
    }
});

我更新了小提琴。http://jsfiddle.net/hMJEy/1932/

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

你可以试试这个：

$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);
  // New code
  if ($('.multi-field').length < 2)
    $('.remove-field', $wrapper).hide();
  else
    $('.remove-field', $wrapper).show();
  $(".add-field", $(this)).click(function(e) {
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    // New code
    $('.remove-field', $wrapper).show();
  });
  $('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
      $(this).parent('.multi-field').remove();
    // New code
    if ($('.multi-field').length < 2)
      $('.remove-field', $wrapper).hide();
    else
      $('.remove-field', $wrapper).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

您可以使用

简单的逻辑来隐藏/显示删除按钮，例如

$(".multi-field-wrapper .add-field").click(function(e) {
  var $wrapper = $(this).prev('.multi-fields'); //or $(this).closest('.multi-field-wrapper').find('.multi-fields');
  $wrapper.find('.multi-field:first-child').clone(true).appendTo($wrapper).find('input').val('').focus();
  $wrapper.find('.remove-field.hidden').removeClass('hidden');
});
$('.multi-field-wrapper').on('click', '.remove-field', function() {
  var $this = $(this),
    $field = $this.closest('.multi-field'),
    $others = $field.siblings('.multi-field');
  $field.remove();
  $others.find('.remove-field').toggleClass('hidden', $others.length == 1);
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 hidden">Remove</button>
      </div>
    </div>
    <button type="button" class="add-field">Add field</button>
  </div>
</form>

working fiddle
i think its meet your requirment

http://jsfiddle.net/hMJEy/1934/

相关文章：