Clear input value on click jquery

Question

I want to clear the input value with class "inputF" generated by the append in jQuery,

<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function () {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID

    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();

        $(wrapper).append('<div><input type="text" class="inputF" name="mytext[]"/>\n\
                <button name="remove" class="remove_field">x</button>\n\
                <button name="clear" class="clear_field">clear</button>\n\
                <input type="checkbox" class="check" group="check">\n\
              </div>'),
    });

});
</script>
<div class="input_fields_wrap">
<button class="add_field_button">+</button>
<button class="show_field_button">show all</button>

This didn't worked for me,

    $(wrapper).on("click", ".clear_field", function () {
        $(this).find('.inputF').val('');
    });

What is the proper way to write it?

Vesion of jQuery is v1.12.3

Keyur
– Keyur

2016-05-19 14:33:55 +00:00
Commented May 19, 2016 at 14:33 — Keyur
– Keyur, Commented May 19, 2016 at 14:33

Mohamed-Yousef · Accepted Answer · 2016-05-19 14:38:32Z

2

While your html structure looks like

<div>
     <input type="text" class="inputF" name="mytext[]"/>
     <button name="remove" class="remove_field">x</button>
     <button name="clear" class="clear_field">clear</button>
     <input type="checkbox" class="check" group="check">
</div>

you need to use .parent();

$(wrapper).on("click", ".clear_field", function () {
     $(this).parent('div').find('.inputF').val('');
});

or .closest();

$(wrapper).on("click", ".clear_field", function () {
     $(this).closest('div').find('.inputF').val('');
});

edited May 19, 2016 at 14:38

answered May 19, 2016 at 14:33

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

Comments

Milind Anantwar · Accepted Answer · 2016-05-19 14:34:20Z

1

You have incorrect selector to target sibling element:

$(wrapper).delegate("click", ".clear_field", function () {
    $(this).closest('div').find('.inputF').val('');
});

edited May 19, 2016 at 14:34

answered May 19, 2016 at 14:29

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

4 Comments

Tushar Over a year ago

What have you changed? Isn't that exact copy of OP code

Milind Anantwar Over a year ago

@Keyur:what version of js you are using and where are you binding the event.

Milind Anantwar Over a year ago

@Tushar: OP was using delegate , i suggested using .on instead

Keyur Over a year ago

Vesion of jQuery is v1.12.3 @MilindAnantwar

Sofiene Djebali · Accepted Answer · 2016-05-19 14:38:00Z

1

Just replace :

$(this).find('.inputF').val('');

With :

$(wrapper).find('.inputF').val('');

answered May 19, 2016 at 14:38

Sofiene Djebali

4,5481 gold badge24 silver badges28 bronze badges

1 Comment

Keyur Over a year ago

Thank you very much. But it is removing all textbox values. Which I don't want to.

Collectives™ on Stack Overflow

Clear input value on click jquery

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related