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

Question

我正在尝试使用此 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();
    });
});

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

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

Answer 1

您可以使用 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

这里复制了元素“input”，然后创建一个元素“button”，将其挂起点击处理程序，然后将按钮添加到元素“input”