How to remove element after AJAX call in jQuery?

Question

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

How does the product.prod_id value relate to the element in the DOM? Can it be used to select it? If so, then you just need to create a jQuery object from the selector and call remove(). If you need an example of this, please add the relevant HTML to the question. Note, HTML not pseudo code or a template. — Rory McCrossan
– Rory McCrossan, Commented Jan 18, 2021 at 12:23
Can we see your HTML please, so we can inspect this a little bit better? Also you didn't define variable properly use const product = $(this).data("id"); and then just pass variable in url: and data: — Denis Omerovic
– Denis Omerovic, Commented Jan 18, 2021 at 12:25
Instead of basic HTML, I'm using pug. The delete button goes like the one I wrote in the question. What should I write inside the success function? — aiman mumtaz
– aiman mumtaz, Commented Jan 18, 2021 at 12:28
Add inside the click handler: var row = $(this).closest("tr") then replace $product.remove() with row.remove() — fdomn-m
– fdomn-m, Commented Jan 18, 2021 at 12:40

Avirup Chakraborty · Accepted Answer · 2021-01-18 12:35:49Z

2

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();

edited Jan 18, 2021 at 12:35

answered Jan 18, 2021 at 12:26

Avirup Chakraborty

1067 bronze badges

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

10 Comments

Jeremy Thille Over a year ago

The HTML is provided in the question (Well, actually it's Pug, but it gets compiled to HTML)

aiman mumtaz Over a year ago

There is no #{product.prod_name} in my code

Avirup Chakraborty Over a year ago

each product in products .row.prod-row .col | #{product.prod_name} .col

Avirup Chakraborty Over a year ago

change it in pug file

aiman mumtaz Over a year ago

Oh in the .pug file. But I have to show the name of product on my page, not the id

|

Collectives™ on Stack Overflow

How to remove element after AJAX call in jQuery?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related