如何清除jQuery中的輸入字段？

Question

單擊預算應用程序中的提交按鈕后，如何清除輸入字段“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 鏈接

Answer 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();
}

Answer 2

來自@pid 的 jQuery 語法是正確的

您還需要在addListItem方法中包含對clearFields的調用

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

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

Answer 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>