如何清除jQuery中的输入字段？答案

【问题标题】：How to clear a input field in jQuery?如何清除jQuery中的输入字段？
【发布时间】：2018-12-08 18:31:58
【问题描述】：

在我的预算应用程序中单击提交按钮后，如何清除输入字段“add__description”和“add__value”。 [在 jQuery 中]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bottom">
  <div class="add">
    <div class="add__container">
      <select class="add__type">
        <option value="inc" selected>+</option>
        <option value="exp">-</option>
      </select>
      <input type="text" class="add__description" placeholder="Add description">
      <input type="number" class="add__value" placeholder="Value">
      <button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
    </div>
  </div>

我调用一个清除字段函数来清除字段。我尝试过这样的事情......

clearFields: function() {
        $(".add__description, .add__value").val("");
    },

这里是 codePen 链接 - CodePen Link

【问题讨论】：

请更新我在执行 clearFields 的地方创建的 sn-p
你在创建任何插件吗？
请查看codePen链接
我刚刚编辑了我的答案。我回复比较晚，因为我一直不在。

标签： javascript jquery input field

【解决方案1】：

在 clear 函数中只需这样做：

    $(".add__description,.add__value").val("");

您以错误的方式获取元素。类名就足够了。

编辑：代码笔审查

我认为您想要实现的是在将条目添加到收入/费用列表后清除字段。

要做到这一点，你必须移动线

UICtrl.clearFields();

进入eventBtn()方法，像这样：

function eventBtn() {
    var input = UICtrl.getInp();

    var newItem = budgetCtrl.addItem(input.type, input.des, input.val);

    UICtrl.addListItem(newItem, input.type);
    UICtrl.clearFields();
}

【讨论】：

谢谢@pid :)

【解决方案2】：

@pid 的 jQuery 语法是正确的

您还需要在您的 addListItem 方法中包含对 clearFields 的调用

addListItem: function(obj, type) {
    ...
    this.clearFields();
},

https://codepen.io/pxfunc/pen/XoWrzo

【讨论】：

非常感谢 MikeM :) 非常感谢您为我付出的宝贵时间。你能告诉我为什么要在 addListItem 中调用 clearField 函数吗？我已经在控制器中调用了它。
@CrazyDeveloper 看起来你所拥有的可能只是一个订购问题，我看到你在用调用 clearFields 的控制器谈论什么，但它在 eventBtn() 方法之外。在我的笔上clearFields 在line 145 上被调用，但eventBtn() 方法在line 143 上结束，

【解决方案3】：

clearFields: function() {
  $element.click(function (e) {
    $('.add__description, .add__value').val('');
  }
},

$(function(){
  $('button.add__btn').click(function(){
     $('.add__description, .add__value').val('');
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bottom">
  <div class="add">
    <div class="add__container">
      <select class="add__type">
        <option value="inc" selected>+</option>
        <option value="exp">-</option>
      </select>
      <input type="text" class="add__description" placeholder="Add description">
      <input type="number" class="add__value" placeholder="Value">
      <button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
    </div>
  </div>

【讨论】：

在你的代码中解释一下怎么样？