Question

我正在尝试删除用户输入，并使用empty()函数将其替换为原始占位符。

这是jQuery文件，它通过<form>从用户处获取输入，并将其附加到具有template()结构的列表中：

var template = function(text) {
  return '<p><input type="checkbox"><i class="glyphicon glyphicon-star"></i><span>' + text + '</span><i class="glyphicon glyphicon-remove"></i></p>';
};

var main = function() {
  $('.form').submit(function() {
        var text = $('#todo').val();
        var html = template(text);
        $('.list').append(html);
        $('#todo').empty();
        return false;
  });
};

$(document).ready(main);

在用户提交文本并将其添加到列表后，我想要＆＃39;表格＆＃39;输入为空，这样您就可以输入一个新项而不删除刚输入的内容。

以下是jQuery与之交互的html文件的片段：

<form class="form">
  <div class="form-container">
    <input id="todo" type="text" class="form-input" placeholder="Add item">
  </div>
  <button type="submit" class="btn">+</button>
</form>

为什么是

行

$('#todo').empty();

不删除用户输入并将其返回到原始占位符？

Answer 1

试试这个：

$('form').trigger("reset");

这是最优雅和正确的方式，因为当您拥有多种不同类型的输入而无需进行任何更改时它将起作用。比试图在所有领域清空和重置安置器要好得多。这将确保将字段设置为初始状态（也设置占位符）。

根据您的代码，您可以这样做：

$('.form').submit(function() {
    // ...
    $(this).trigger("reset");
    // ...
});

查看基于您的示例表单，其中包含更多字段input和select here。

请在此处查看JQuery重置文档：JQuery API Doc/reset

Answer 2

.empty()适用于其他用例。来自docs ...

从DOM中删除匹配元素集的所有子节点。

相反，您可以.val('') <input />。请注意以下简化示例...

$('.form').submit(function() {
    $('#todo').val('');
    return false;
});

JSFiddle Link - 演示

作为对相邻代码的观察，您还可以传递event并致电.preventDefault()代替return false;。或者，您可以在功能块中调用reset()：this.reset() - reset demo，但会阻止默认行为。

Answer 3

空方法不会删除属性或值，但会删除元素中的html。您应该使用val：

$('#todo').val('');//To empty the value

如果您想要删除占位符，请使用removeAttr方法：

$('#todo').removeAttr('placeholder');

使用i.d清除Jquery中的div

3 个答案: