Removing . append() jQuery

Asked

Viewed 5,148 times

1

I have several buttons where at the click of it directs to an Ajax request passing as parameter the id of a product and through an external file, according to it is added to the cart but this is not so relevant. Another thing not so important in this case is that when this button is clicked its text is changed from "Buy" to "Remove" and vice versa. In the success of this request, I get the return that the external file brings me(an array) and "mount" it to be displayed on the page HTML. I was wondering how I could remove this .append what I do.

Obs: the HTML is mounted in a class called .item-custom where the page loading is already filled with other things and if I use the code $j('.item-custom').remove(); all that is within this class is removed, but I only wish to remove the .append() what I do.

Button code:

<button type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>"><span><span>Comprar</span></span></button>

Code of the Ajax request:

function addCartao(product_id){
                $j.ajax({
                  type: "POST",
                  url: "adicionar.php",
                  data: {
                    product_id: product_id
                  },
                  dataType: 'json',
                  cache : false,
                  beforeSend: function () {

                  },
                  success: function (retorno) {
                    var button = $j('button[name=cartaoMensagem' + product_id + ']');

                  if($j(button).text() == 'Comprar'){
                    $j('#cartao').find(':button').not(button).attr('disabled',true);
                    $j(button).html('<span>Remover</span>');
                    $j('.item-custom').append('<tr><td class="a-center lc-thumbnails"><img src="' + retorno['imagem'] + '" width="50" height="50" alt="' + retorno['name'] + '"></td><td><h3 class="product-name">' + retorno['name'] + '</h3></td><td class="a-center">1</td><td class="a-right"><span class="cart-price"><span class="price"> R$ ' + retorno['price'] + '</span></span></td></tr>');
                  } else{
                    $j('#cartao').find(':button').attr('disabled',false);
                    $j(button).html('<span>Comprar</span>');
                  }

                  },
                  complete: function () {

                  },
                  error: function (x,y,z) {
                    alert("error");
                    alert(x);
                    alert(y);
                    alert(z);
                    window.location.reload();
                    history.go(0);
                    window.location.href=window.location.href;
                  }
              });
            }
javascript jquery html ajax

  • On that new line you add there is no button to remove? Do you want to remove by clicking on the same button that created the new line but now says Remover right?

  • Dude, I’m not sure I understand. vc wants to remove only = '<tr><td class="a-center Lc-thumbnails"><img src="' + return['image'] + 'width="50" height="50" alt="' + return['name'] + '"></td><td><H3 class="product-name">' + return['name'] + '</H3></td><td class="a-center">1</td><td><class="a-right"><span="Cart-price"><span class="price"> R$ ' + return['price'] + '</span></span></td></tr>' ?

  • @Sergio Certo, that’s right.

  • @Alan Yes, wanted to remove just this.

  • if your class = "Lc-thumbnails" is unique you can do it $('.Lc-thumbnails'). parents('tr'). remove(); or $('.Lc-thumbnails'). Parent(). remove();

2 answers

1


Ever tried to put an id on <tr> that is inside the .append and when removing search for this id ?

$j('.item-custom').append('<tr id="trAppend"><td> Meu codigo </td></tr>');

To remove

$j('.item-custom #trAppend').remove();

You can exchange id for class if there will be more than one element.

  • I hadn’t even thought about it, it worked, thank you!

  • @Matheusportela and Serginho, this solution only works for 1 element because the Ids have to be unique... In that case there has to be some logic to create a different ID for each line.

  • @Sergio But in my case, when the buy button is clicked, all the others who have are disabled until the same one that was clicked with the written text remove is clicked again so that others are enabled to click again, that is, this id will be unique, only one, because the button with the written buy that will make the .append() can only be clicked once and for it to be clicked again, it is mandatory that the same .append() that was added, be removed. I don’t know if you understood what I meant about this case.

  • You can generate one id dynamic using the name button.

  • @Matheusportela the problem arises if it is possible to add more than 1 <tr> each time. If you can’t have more than 1 <tr> each time the problem does not arise and there your problem is much simpler. My comment is only a warning to those who read the answer, because it can generate bugs. Of course, as I and Sérginho mentioned, it is possible to create some logic to generate dynamic and unique Ids.

  • @Sergio Yes, what you said is totally correct. Is that in my case only one can add <tr> at a time, then you don’t have so many exceptions, problems like that to treat, but if you can add more than one <tr> at a time, there may be bugs like you said yourself, and should - if you have a logic to create dynamic and unique Ids.

  • @Sergio That you said stay here as information for other people who read this issue.

Show 2 more comments

1

In this case the best alternative is to transform this HTML string into elements. So you have a pointer for them and you can make the button remove them like this:

var $j = jQuery.noConflict();
$j('button').on('click', function() {
  var button = this;
  if ($j(button).text() == 'Comprar') {
    var html = '<p>Algum html...</p>';
    var elemento = $j.parseHTML(html);
    $j(button).html('<span>Remover</span>');
    button.htmlRelacionado = elemento;
    $j('.item-custom').append(elemento);
  } else {
    $j(button).html('<span>Comprar</span>');
    $j(button.htmlRelacionado).remove()
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Comprar</button>
<div class="item-custom"></div>

  • Thank you for all your help and attention, your code also worked, but for my specific case, the question I checked as correct fit more. But still, I thank you for your help!

Browser other questions tagged javascript jquery html ajax

You are not signed in. Login or sign up in order to post.