Steggie Steggie - 4 months ago 12
Javascript Question

Onclick show button for that title

Update
I would like to have the remove item button be hidden when the item has been removed...

I have 2 buttons one to add an item and one to delete an item from a cart.
Now I would like to have the button to delete the item only to show up once the button to add the item is clicked.

Here is the HTML for the buttons:

<button class='add-product' onclick="showDel($(this))" data-product='<?php the_title();?>'>Add Product</button>

<button class="delete-product" onclick="hideDel($(this))" data-product="<?php the_title();?>" style='display:none;'>Remove Product</button>


Code I'm using now:

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


But the
Remove Item
button doesn't hide...

HTML Structure:

<button class='add-product' onclick="showDel($(this))" data-product='Boot X'>Add Product</button>
<button class="delete-product" data-product="Boot X" style='display:none;'>Remove Product</button>

Answer

I hope that's what you mean.

Try:

HTML:

<button class='add-product' onclick="showDel($(this))" data-product='<?php the_title();?>'>Add Product</button>
<button class="delete-product" onclick="hideDel($(this))" data-product="<?php the_title();?>" style='display:none;'>Remove Product</button>

Javascript:

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

jsfiddle:

https://jsfiddle.net/Lxo32trc/3/