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>

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

Answer 2

只需这样做

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

在这里尝试！

http://jsfiddle.net/4WGRP/

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>

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>

Answer 5

使用version: "3" services: jackett: image: linuxserver/jackett container_name: jackett restart: always environment: - PGID=1000 - PUID=1000 - TZ=Europe/London - VIRTUAL_HOST=jackett.${SITE_URL} - VIRTUAL_PORT=9117 - LETSENCRYPT_HOST=jackett.${SITE_URL} - LETSENCRYPT_EMAIL=${MAILER_DEFAUT_SENDER_ADDRESS} volumes: - ${MOUNT_POINT}/jackett/config:/config - ${MOUNT_POINT}/jackett/downloads:/downloads ports: - "9117:9117" expose: - 9117 networks: default: external: name: nginx-proxy方法：

remove()

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

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

5 个答案: