How to select element inside button using jQuery

Question

What I'm trying to do is, to change i's class (which located inside button) on click

<button><i class="fa fa-square-o"></i></button>

Using js code like below (inside on click function):

...
$(this).child("i.fa").removeClass("fa-square-o");
...

getting child is not a function error

What am I doing wrong?

Maybe try $(this + " > i").removeClass("fa-square-o) ... ? or $(this).find("i").removeClass("fa-square-o) — MNie
– MNie, Commented Nov 9, 2014 at 18:12

Bhojendra Rauniyar · Accepted Answer · 2014-11-09 18:12:38Z

5

Yes, really there is no child() method in jQuery.

You may use find() or children() for that.

$(this).children("i.fa").removeClass("fa-square-o");

answered Nov 9, 2014 at 18:12

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

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

Comments

Weafs.py · Accepted Answer · 2014-11-09 18:14:58Z

2

You could use find() instead.

$('button').click(function() {
    $(this).find("i.fa").removeClass("fa-square-o");
});

Fiddle

answered Nov 9, 2014 at 18:14

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

Comments

Mohi · Accepted Answer · 2014-11-09 18:14:05Z

1

child is not a function. try this function:

$(this).children("i.fa").removeClass("fa-square-o");

answered Nov 9, 2014 at 18:14

Mohi

1,7981 gold badge28 silver badges42 bronze badges

Comments

mtl · Accepted Answer · 2014-11-09 18:23:04Z

0

jQuery accepts a second argument as context:

$('button').click(function() {
    $('i.fa', this).removeClass('fa-square-o');
});

answered Nov 9, 2014 at 18:23

mtl

7,5672 gold badges23 silver badges24 bronze badges

Comments

Marian Gibala · Accepted Answer · 2014-11-09 18:26:05Z

0

You are looking for jQuery .children() function. If you are trying to call that function from onclick attribute, you have to remember to pass reference to object by using "this" word.

<button onclick="removeClass(this)"><i class="fa fa-square-o">test</i></button>

removeClass = function(obj){

     $(obj).children("i.fa").removeClass("fa-square-o");

}

Working fiddle: http://jsfiddle.net/4wvgvzL9/

answered Nov 9, 2014 at 18:26

Marian Gibala

8847 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to select element inside button using jQuery

5 Answers 5

Comments

Fiddle

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related