CODEWITHSUNDEEP
javascriptjqueryhtml
Zain
Zain

Reputation: 662

Removing Class Using Jquery According to Parameter Value

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?

Upvotes: 0

Views: 86

Answers (3)

mahdi azarm
mahdi azarm

Reputation: 349

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.

Upvotes: 0

SRK
SRK

Reputation: 3496

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

Use this simple script.

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

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");
}

Upvotes: 1

Related Questions