Removing Class Using Jquery According to Parameter Value

Question

I have the following button link:

<a href="e5f6ad6ce374177eef023bf5d0c018b6" data-id="573" onclick="reEnableBtn(573)">×</a>

And the following js:

function reEnableBtn(prodId) {

   alert(prodId);
};

Until now all good, on click of the link I get an alert with the content: 573 as expected.

Next thing I want to do is with the following html:

<a href="/new-page/?add-to-cart=573" class="button product_type_simple add_to_cart_button ajax_add_to_cart added" data-product_id="573">
<i class="fa fa-shopping-cart finished disabled-button"></i>
</a>

Within the JS I want to add a removeClass function which removes the classes 'finished' and 'disabled-button' from the <i> where the data-product_id of the parent <a> matches the value of prodId within the JS function (because I have other links with same structure but different data-product_id).

How do I do this?

What code have you written for the second part of your question so far? It seems completely unrelated to the first — CertainPerformance
– CertainPerformance, Commented Apr 20, 2018 at 8:55
You can use jquery function .removeClass("classname") to remove any class — Mahrukh Mehmood
– Mahrukh Mehmood, Commented Apr 20, 2018 at 8:57

Milind Anantwar · Accepted Answer · 2018-04-20 08:55:38Z

1

You can

1) use attribute equal selector to target anchor element with same data product id

2) find element i in above anchor element

3) use removeClass to remove multiple classes from it

function reEnableBtn(prodId) {
   $('[data-product_id=' + prodId + '] i').removeClass("finished disabled-button");
}

answered Apr 20, 2018 at 8:55

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

4 Comments

Zain Over a year ago

Thanks it's working :) Can you please tell how can i add just a small delay to remove this class?

Milind Anantwar Over a year ago

what is the expected behavior after delaying removeClass?

Zain Over a year ago

after 2 seconds will remove the disabled-button class.

Milind Anantwar Over a year ago

You can use setTimeout

Smit Raval · Accepted Answer · 2018-04-20 08:55:47Z

0

function reEnableBtn(prodId) {
 $("a[data-product_id='"+prodId+"']").find("i").removeClass("finished disabled-button");
};

Use this simple script.

answered Apr 20, 2018 at 8:55

Smit Raval

3,5161 gold badge12 silver badges24 bronze badges

Comments

mahdi azarm · Accepted Answer · 2018-04-20 09:30:07Z

0

Use this code

jQuery(function($){

    var s = $("body").find('[data-product_id=573]');

    s.on("click", function(e){
        var i = $(this).find('i');
        if (i.hasClass('finished'))
            i.removeClass('finished');
        if (i.hasClass('disabled-button'))
            i.removeClass('disabled-button');
        alert("The classes was removed.");
        return false; // this is for disabling anchor tag href
    });
})

jsfiddle

If you have any other question feel free to ask in comments.

answered Apr 20, 2018 at 9:30

mahdi azarm

3592 gold badges8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Removing Class Using Jquery According to Parameter Value

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related