删除 jQuery 时清除输入字段答案

【问题标题】：Clear input fields on remove jQuery删除 jQuery 时清除输入字段
【发布时间】：2018-04-17 12:17:05
【问题描述】：

我正在使用表单，其中我有删除功能。它工作正常，但我希望在触发删除功能时清除字段值。因为我还将输入值发送到我的 php 脚本。这是html

<div class="form-group">
<div class="col-xs-12 col-sm-6 childname">
  <div class="field text-left">
      <label class="text-left">Child name</label>
      <input class="thevoornaam character" name="voorname[]" type="text" placeholder="Voornaam"/>
  </div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">        
  <div class="field text-left">
      <label class="text-left">Date of birth</label>
      <input type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" onkeyup="showHint(this.value,'stepname')" />
      <!-- <input type="text" size="50" id="URL" onchange="getDoB(this.value)"/> -->
  </div>
</div>
</div>
<a class="delete removeButton" href="#" onmouseup="showHint('close','stepname');"><i class="fa fa-times"></i></a>

这是我的js代码

(文档).ready(函数() {

$('#taskForm')
    .bootstrapValidator({
        framework: 'bootstrap',
        fields: {
            'task[]': {
                // The task is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    notEmpty: {
                        message: 'The task is required'
                    }
                }
            },
            'date[]': {
                // The due date is placed inside a .col-xs-6 element
                row: '.col-xs-6',
                validators: {
                    date: {
                        format: 'DD/MM/YYYY'
                        // message: 'Fill valid date of birth'
                    }
                }
            }
        }
    })
    .on('added.field.fv', function(e, data) {
        if (data.field === 'date[]') {
            // The new due date field is just added
            // Create a new date picker
            data.element
                .parent()
                // .datepicker({
                //     format: 'dd/mm/yyyy'
                // })
                .on('changeDate', function(evt) {
                    // Revalidate the date field
                    $('#taskForm').bootstrapValidator('revalidateField', data.element);
                });
        }
    })

    // Add button click handler
    .on('click', '.addButton', function() {
        var $template = $('#taskTemplate'),
            $clone    = $template
                            .clone(true,true)
                            .removeClass('hide')
                            .removeAttr('id')
                            .insertBefore($template);
        $("#stepname").addClass("disabled")
        // Add new fields
        // Note that we DO NOT need to pass the set of validators
        // because the new field has the same name with the original one
        // which its validators are already set
        $('#taskForm')
            .bootstrapValidator('addField', $clone.find('[name="task[]"]'))
            .bootstrapValidator('addField', $clone.find('[name="date[]"]'))
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row = $(this).closest('.form-group');

        // Remove fields
        $('#taskForm')
            .bootstrapValidator('removeField', $row.find('[name="task[]"]').val(''))
            .bootstrapValidator('removeField', $row.find('[name="date[]"]').val(''));

        // Remove element containing the fields
        $row.remove();
    });

});

在这里，我试图清除这些值，但它不起作用。任何人都可以在这里帮助我在做什么 miskate 吗？

先谢谢了

【问题讨论】：

可以分享完整的JS代码吗？
点击时是否触发$row.remove();？
我已经更新了我的代码，你现在可以看到完整的js代码了。

标签： javascript jquery html

【解决方案1】：

如果您需要做的只是清除字段... 我用.each 遍历每一个并将其值设置为空字符串?

ES6

$('.delete.removeButton').click(() => {
  $('.form-group').find('input').each((i, el) => {
    $(el).val('')
  })
})

ES5

$('.delete.removeButton').click(function () {
  $('.form-group').find('input').each(function (i, el) {
    $(el).val('')
  })
})

【讨论】：

请对您的回答做出一些解释，以便其他用户能够理解。
@Chilll007 .. 当单击具有“delete”和“removeButton”类的按钮时，代码将在具有“form-group”类的表单中找到所有“input”元素并将输入的所有值设置为空白，因此 val() 中的空引号

【解决方案2】：

使用按钮而不是锚标记并添加 onclick="clearInput()" 到其中：

 <input type="text" id = "clId" class="date" name="date[]" placeholder="DD / MM / JJJJ" onkeyup="showHint(this.value,'stepname')" />
 <button onclick= "clearInput()" >clear value</button>

然后在js中尝试这样：

function clearInput(){
 $('#clId').val('');
}

按照这个给定的方式。希望您的问题能得到解决。

【讨论】：