Steggie Steggie - 4 months ago 18
Javascript Question

Remove class onClick

I have 2 buttons, one that adds a product to my cart and the other one that deletes a product from my cart. Now when you click on

add product
a class is added to the add button
blur
. Using this code:

function showDel($this) {
var dataProduct = $this.attr("data-product");
$(".delete-product[data-product='" + dataProduct + "']").show();
$(".add-product[data-product='" + dataProduct + "']").addClass( "blur");
}


This also makes the button
delete-product
appear. I would like to remove the class
blur
when the delete-product button is pressed.

I have a little peace of code that hides the
delete-product
button. I would like to use that to remove the class
blur
from the
add-product
button.

function hideDel($this) {
$this.hide();
}


I tried adding the code below to the
hideDel
function, but that doesn't work because you don't click on the
add-product
button.

$(".add-product[data-product='" + dataProduct + "']").removeClass( "blur" );


This also doesn't work.

$('.delete-product').click(function() {
$(".add-product[data-product='" + dataProduct + "']").removeClass( "blur" );
});


This works, but it then removes the class from all the buttons:

$('.delete-product').click(function() {
$(".add-product").removeClass( "blur" );
});


How can I tell the
delete-product
button to remove the class
blur
from
.add-product[data-product='" + dataProduct + "']
when
delete-product
is clicked?

Answer

Try this:

function hideDel($this) {
    var dataProduct = $this.attr("data-product");
    $this.hide();
    $(".add-product[data-product='" + dataProduct + "']").removeClass("blur");
}