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

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

$('.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非常陌生。当只有一个字段实例时，有人对如何删除“删除”按钮有什么建议吗？

我更新了fiddle。

您可以尝试以下方法：

$（'.multi-field wrapper'）。每个（函数（）{
var$wrapper=$（'.multi-fields'，this）；
//新代码
如果（$（'.multi-field'）。长度<2）
$（'.remove field'，$wrapper.hide（）；
其他的
$（'.remove field'，$wrapper.show（）；
$（“.addfield”，$（this））。单击（函数（e）{
$（'.multi-field:first-child'，$wrapper.clone（true）.appendTo（$wrapper.find（'input'）.val（''）.focus（）；
//新代码
$（'.remove field'，$wrapper.show（）；
});
$（'.multi-field.remove-field'，$wrapper）。单击（函数（）{
如果（$（'.multi-field'，$wrapper）.length>1）
$（this.parent（'.multi-field'）.remove（）；
//新代码
如果（$（'.multi-field'）。长度<2）
$（'.remove field'，$wrapper.hide（）；
其他的
$（'.remove field'，$wrapper.show（）；
});
});

东西
去除
添加字段
看看这个简单的解决方案，它不移除按钮，而是调整可见性。根据您的应用程序，这可能足够了：


您可以使用一个简单的逻辑来隐藏/显示remove按钮，如


$（“.multi-field wrapper.add field”）。单击（函数（e）{
var$wrapper=$（this.prev（'.multi-fields'）；//或$（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'）。在（'单击'，'.remove-field'，函数（）上{
变量$this=$（this），
$field=$this.closest（'.multi-field'），
$others=$field.sides（'.multi-field'）；
$field.remove（）；
$others.find（'.remove field'）.toggleClass（'hidden'，$others.length==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();
    });
});

$（'.multi-field wrapper'）。每个（函数（）{
var$wrapper=$（'.multi-fields'，this）；
$（“.addfield”，$（this））。单击（函数（e）{
var$el=$（'.multi-field:first-child'，$wrapper）.clone（true）；
var$removeButton=$（'Remove'）；
$removeButton.单击（函数（）{
如果（$（'.multi-field'，$wrapper）.length>1）
$（this.parent（'.multi-field'）.remove（）；
});
$el.append（$removeButton）；
$el.appendTo（$wrapper）.find（'input'）.val（'.focus（）；
});
});


这里是复制的元素“input”，然后创建一个挂起的元素“button”，点击处理程序，然后将按钮添加到元素“input”
了解方法。@BhojendraNepal的可能重复问题不是“remove”按钮不起作用，只是页面上唯一的字段没有必要！我一直在尝试
append（）
整个输入字段块作为替代解决方案，但隐藏按钮肯定更优雅、更容易
working fiddle

i think its meet your requirment

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

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