clear value in an input field with jQuery

Question

Hi I have a number of inputs for telephone numbers, they use the same class and the same show/hide techinque. I want to be able to clear the contents of the phone number in the input box, i.e. with the class name of input_tel.

However it seems to clear all inputs which I assume is because I am using the following line; input:text , when I put in a class it just fails to work.

My JS and some of my html is below or view a jsFiddle:

$(".contact_numbers").on('click', '.clearnumber', function () {
  $(this).siblings('input:text').val('');
});

<div class="telephonetwo contact_numbers">
   <input type="text" class="smallinput contactpagelabel" name="faxname" size="10" value="Fax">
   <input type="checkbox" class="contact_no" name="showfax" value="Y">      
   <input type="text" name="fax" size="30" value="016128 13456" class="input_tel">
   <a href="#" class="remove">Hide</a> <a href="#" class="clearnumber">Clear #</a>
 </div>

If you are viewing my JSfiddle click the reveal additional numbers for the clear button to appear.

Update

I want to be able to clear the closest input_tel rather than all of them, as their are multiple numbers.

Thanks in advance

Dhaval Bharadva · Accepted Answer · 2014-02-18 11:44:02Z

3

replace:

$(this).siblings('input:text').val('');

with

$(this).siblings('input:text').closest('.input_tel').val('');

JSFIDDLE DEMO

edited Feb 18, 2014 at 11:44

answered Feb 18, 2014 at 11:37

Dhaval Bharadva

3,0852 gold badges26 silver badges36 bronze badges

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

2 Comments

user0129e021939232 Over a year ago

that clears the whole line I want it to clear the closest input_tel class

user0129e021939232 Over a year ago

not to worry changed your type to class and replaced the name

Niklas · Accepted Answer · 2014-02-18 11:43:56Z

2

How about targeting the input_tel class then?

$(".contact_numbers").on('click', '.clearnumber', function () {
   $(this).parent().parent().find('input.input_tel').val('');
});

Assuming no other input fields have that input_tel class on them.

edited Feb 18, 2014 at 11:43

answered Feb 18, 2014 at 11:35

Niklas

13.2k24 gold badges82 silver badges124 bronze badges

1 Comment

Niklas Over a year ago

What if you step up two levels with parent() and then target the class, like my new edit?

Edd Aslin · Accepted Answer · 2014-02-18 11:39:39Z

1

This should do it...

$(".contact_numbers").on('click', function () {
  $(".input_tel").val('');
});

answered Feb 18, 2014 at 11:39

Edd Aslin

2944 silver badges11 bronze badges

Comments

RoadieRich · Accepted Answer · 2016-04-14 13:24:33Z

0

The safe way to clear input fields with jquery

$.fn.noText = function() {/*use the jquery prototype technology to make a chainable clear field method*/
    if(this.is('input')){ /*check to c if you the element type is an input*/
        this.val('');/*clear the input field*/
    }return this;/*means it is chainable*/
};
$('input').noText();

edited Apr 14, 2016 at 13:24

RoadieRich

6,6793 gold badges40 silver badges55 bronze badges

answered Apr 14, 2016 at 13:04

apexpals.com

3041 silver badge12 bronze badges

Collectives™ on Stack Overflow

clear value in an input field with jQuery

If you are viewing my JSfiddle click the reveal additional numbers for the clear button to appear.

Update

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

If you are viewing my JSfiddle click the reveal additional numbers for the clear button to appear.

Update

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related