Clear all textboxes except few using jQuery

In this post I am going to explain, how we can clear all of the textboxes except a few using jQuery.
Let’s say we have a HTML markup like this:

<div id="parent"> 
    <input type="text" id="one" /><br/>
    <input type="text" id="two" /><br/>
    <input type="text" id="three" /><br/>
    <input type="text" id="four" /><br/>
    <button id="clear">Clear</button>
</div>

The HTML markup here is quite a simple one. We have a parent div, which has four input type text elements with specific IDs, one, two, three and four. Now, let’s clear all the textboxes here first.

Now, we can achieve this using jQuery like this:

$('#clear').click(function(){
    $('#parent > input:text').val('');            
});

Explanation:

  1. Code in the first line
    $('#clear').click(function(){
    

    In the above code, we are binding a click event handler to the clear button with id as `clear`.

  2. Code in the second line
    $('#parent > input:text').val('');
    

    In the above code, firstly we selecting all the elements of type text inside the parent element using the  :text  selector.

    Then we are setting an empty string as value for all the selected textboxes, in order to clear all the previous values stored, using  .val( value )  method.

Demo:
Working Demo on jsFiddle #1

Now let’s say we have a requirement like, we want to clear all the textboxes except two textboxes with id  two  and  three . In order to achieve this we have to make some modifications in the HTML markup for the textboxes like this:

<div id="parent"> 
    <input type="text" id="one" /><br/>
    <input type="text" id="two" class="ignore" /><br/>
    <input type="text" id="three" class="ignore" /><br/>
    <input type="text" id="four" /><br/>
    <button id="clear">Clear</button>
</div>

As you can see above, we have added here a class named “ignore” to both the textboxes which we don’t want to clear. Now, we can achieve our requirement using jQuery like this:

$('#clear').click(function(){
    $('#parent > input:text:not(".ignore")').val('');            
});

Explanation:

  1. Code in the first line
    $('#clear').click(function(){
    

    There is no changes done in first line of code. Its same as above.

  2. Code in the second line
    $('#parent > input:text:not(".ignore")').val(''); 
    

    In the above code, firstly we selecting all the elements of type text inside the parent element which do not have a class “ignore”, using the  :not()  selector. Next, we are clearing out the textboxes that we got using the above selectors in the same way, as we did earlier.

Demo:
Working Demo on jsFiddle #2

That’s it! If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s