CODEWITHSUNDEEP
javascriptjquery
aiman mumtaz
aiman mumtaz

Reputation: 21

How to remove element after AJAX call in jQuery?

I'm trying to remove a product from my page after clicking the delete button

if(products && products.length>0)
  .products
    .row
      h4.col.text-center My Products
    hr
    each product in products
      .row.prod-row
        .col
          | #{product.prod_name}
        .col
          button.editprd.btn.btn-primary(type="button" data-id=product.prod_id data-url="/b/prod/edit") Edit 
          button.delprd.btn.btn-primary(type="button" data-id=product.prod_id data-url="/b/prod/del") Delete 

else
  | You have not added any product in this category.

My JQuery looks like this

$(document).on('click', ".delprd", function(e) {
        product =  $(this).data("id");
        $.ajax({
            url: $(this).data("url"),
            type: "GET",
            data: { prodId: $(this).data("id") },
            success: function(data, status, xhr) {
                    $product.remove();
                },
            error: function(jqXhr, textStatus, errorMessage) {}
        });
    });

Although the product is getting deleted after refreshing the page, I can't see it disappear right after I click the Delete button

Upvotes: 1

Views: 974

Answers (1)

Avirup Chakraborty
Avirup Chakraborty

Reputation: 106

Please show me the html of this product with the delete button when we click on the button to remove

change #{product.prod_name} to #{product.prod_id}

then replace it $product.remove() with $("#"+product).remove();

Upvotes: 2

Related Questions