Delete all input element inside form jQuery

Question

How to delete all kind of input field inside a form when clicking a href element?

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

Nope. I took "input field" to mean <input> elements. If you want to delete <textarea> too, then you could do $("#form-delete").find("input,textarea").remove(); — Tyler Roper
– Tyler Roper, Commented Jul 27, 2018 at 3:56
another option is $("#form-delete").find("input,select,textarea").remove(); — Arun P Johny
– Arun P Johny, Commented Jul 27, 2018 at 3:56

Saghir · Accepted Answer · 2018-07-27 04:10:16Z

2

To delete all input tags values (clear the input text)

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

Try it
http://jsfiddle.net/9q6jywmg/

To actually remove the element itself

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

Try it
http://jsfiddle.net/hym5kde7/

Of course to remove textarea element, do the same by selecting textarea tagged elements also, like this

$('textarea').remove();

answered Jul 27, 2018 at 4:10

Saghir

2,5352 gold badges19 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darth Spider · Accepted Answer · 2018-07-27 04:03:40Z

0

Just do this

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

Try it here!

http://jsfiddle.net/4WGRP/

answered Jul 27, 2018 at 4:03

Darth Spider

981 silver badge9 bronze badges

Comments

Morteza Fathnia · Accepted Answer · 2018-07-27 04:09:49Z

0

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

answered Jul 27, 2018 at 4:09

Morteza Fathnia

4353 silver badges12 bronze badges

Comments

Abhishek Kumar · Accepted Answer · 2018-07-27 04:28:12Z

0

$(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>

edited Jul 27, 2018 at 4:28

answered Jul 27, 2018 at 4:16

Abhishek Kumar

2,55912 silver badges27 bronze badges

2 Comments

Tiny Dancer Over a year ago

text area is still there

Abhishek Kumar Over a year ago

@TinyDancer, its done i have just provided custom attribute to every input, and on delete button i am finding all my custom inputs and removing them.

Razvan Zamfir · Accepted Answer · 2018-07-27 06:31:32Z

0

Use the remove() method:

$(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>

answered Jul 27, 2018 at 6:31

Razvan Zamfir

4,8107 gold badges51 silver badges292 bronze badges

Collectives™ on Stack Overflow

Delete all input element inside form jQuery

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related