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>

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>

• javascript
• jquery
• html
• element

• 3 $("#form-delete").find("input").remove(); – Tyler Roper Commented Jul 27, 2018 at 3:55
• $("#form-delete").find(":input").remove(); – Arun P Johny Commented Jul 27, 2018 at 3:55
• @TylerRoper is it gonna delete the textarea too? – Tiny Dancer Commented Jul 27, 2018 at 3:56
• 1 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 Commented Jul 27, 2018 at 3:56
• 1 another option is $("#form-delete").find("input,select,textarea").remove(); – Arun P Johny Commented Jul 27, 2018 at 3:56

5 Answers 5

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

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

$('textarea').remove();

Just do this

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

Try it here!

http://jsfiddle/4WGRP/

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

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

<script src="https://ajax.googleapis./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>

Use the remove() method:

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

<script src="https://ajax.googleapis./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>