删除 jQuery 中表单内的所有输入元素

Question

如何在单击 href 元素时删除表单内的所有输入字段？

<script type="text/javascript">
 $('.delete-link').on('click', function() {
   //remove all input inside #form-delete
 });
</script>

<form id="form-delete" action="/post>" method="post">
 <input type="text" name="test1" value="">
 <textarea name="test2" rows="8" cols="80">TEST</textarea>
 <input type="checkbox" name="test3" value="">
 <input type="number" name="test4" value="">
 <input type="password" name="test5" value="">
 <input type="email" name="test5" value="">
</form>

<a href="#" class="delete-link">
   <span>Remove All input</span>
</a>

- Tiny Dancer

---

$("#form-delete").find("input").remove(); - Tyler Roper

不是的。我认为“输入字段”指的是<input>元素。如果你也想删除<textarea>，那么你可以这样做：$("#form-delete").find("input,textarea").remove(); - Tyler Roper

另一个选项是 $("#form-delete").find("input,select,textarea").remove();。 - Arun P Johny

@TylerRoper https://meta.stackoverflow.com/questions/253045/answerers-who-only-use-comments ? - FatalMerlin

@TylerRoper 啊，我明白了，那很有道理，我只是好奇 :) 谢谢你抽出时间来解释！ - FatalMerlin

Answer 1

删除所有输入标记的值（清除输入文本）。

//when the Document Loads, add event to clears all input fields
$(document).ready(function() {
  $('.delete-link').on('click', function() {
   $('input').val('');    
 });   
});

试一下
http://jsfiddle.net/9q6jywmg/

要实际删除元素本身

//Document Loads, add event to remove all input tagged elements
$(document).ready(function() {
  $('.delete-link').on('click', function() {
   $('input').remove();
 });   
});

试一下
http://jsfiddle.net/hym5kde7/

当然，要删除 textarea 元素，也可以通过选择标记为 textarea 的元素来执行相同的操作，如下所示

$('textarea').remove();

- Anddo

Answer 2

只需要这样做

document.getElementById('your_id').remove(); //also add ids to your input fields

在这里试试吧！

http://jsfiddle.net/4WGRP/

- Darth Spider

Answer 3

<form id="form-delete" action="/post>" method="post">
 <input type="text" name="test1" value="">
 <textarea name="test2" rows="8" cols="80">TEST</textarea>
 <input type="checkbox" name="test3" value="">
 <input type="number" name="test4" value="">
 <input type="password" name="test5" value="">
 <input type="email" name="test5" value="">
</form>

<a href="#" class="delete-link">
      <span>Remove All input</span>
</a>

<script type="text/javascript">
 $('.delete-link').on('click', function() {
 //remove elements
  // $('#form-delete').children('input').remove(); 
//remove values
   $('#form-delete').children('input').val('')
 });
</script>

- Morteza Fathnia

Answer 4

$(document).ready(function() {
  $('.delete-link').on('click', function() {
   $('#form-delete [my-input]').remove();
 });   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post>" method="post">
 <input type="text" my-input='' name="test1" value="">
 <textarea my-input=''  name="test2" rows="8" cols="80">TEST</textarea>
 <input my-input=''  type="checkbox" name="test3" value="">
 <input my-input=''  type="number" name="test4" value="">
 <input my-input=''  type="password" name="test5" value="">
 <input my-input=''  type="email" name="test5" value="">
</form>

<button href="#" class="delete-link">
      <span>Remove All input</span>
</button>

- Abhishek Kumar

---

文本区域仍然存在 - Tiny Dancer

@TinyDancer，完成了。我刚刚为每个输入提供了自定义属性，在删除按钮上，我正在查找所有我的自定义输入并将它们删除。 - Abhishek Kumar

Answer 5

使用remove()方法：

$(function(){
   $('.delete-link').on('click', function() {
   $("#form-delete").find("input").remove();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form-delete" action="/post" method="post">
 <input type="text" name="test1" value="">
 <textarea name="test2" rows="8" cols="80">TEST</textarea>
 <input type="checkbox" name="test3" value="">
 <input type="number" name="test4" value="">
 <input type="password" name="test5" value="">
 <input type="email" name="test5" value="">
</form>

<a href="#" class="delete-link">
   <span>Remove All input</span>
</a>

- Razvan Zamfir