Question

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

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

一切都很好，但问题是当只有一个字段时，“删除”按钮会保留在那里。

当只有一个字段时，我想让它看起来像jsfiddle。 javascript使用clone函数。如果我删除了删除按钮，当添加更多字段时，它将从所有后续“克隆”中删除。我是javascript的新手。当只有一个字段实例时，是否有人建议如何删除“删除”按钮？

Answer 1

你可以隐藏按钮＆＃34;删除＆＃34;使用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();
    });
});

jsfiddle

这里是复制元素＆＃34;输入＆＃34;，然后创建＆＃34;按钮＆＃34;的元素。这是挂起点击处理程序，然后按钮被添加到元素＆＃34;输入＆＃34;

Answer 2

我更新了小提琴。 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{}
    });
});

Answer 3

你可以试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

Answer 5

您可以使用简单的逻辑隐藏/显示删除按钮，如

$(".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>

Answer 6

working fiddle

i think its meet your requirment

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

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

6 个答案: