Removing .append () jQuery

Navigation
1

I have several buttons where in the click of the same directs to an Ajax request passing as parameter the id of a product and through an external file, as the same is added to the cart however this is not so relevant. Another thing not so important in this case is that when this button is clicked your 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" this to be displayed on the HTML page. I wanted to know how I can remove this .append I do.

Note: HTML is mounted on a class called .item-custom where loading in the page is already populated with other things and if I use the code $j('.item-custom').remove(); everything inside that class is removed , but I just want to remove the .append() that 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>

Ajax request code: 

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;
                  }
              });
            }
    
asked by anonymous 31.08.2017 / 21:26

2 answers

1

Have you tried to put an id in <tr> that is inside .append and at the time of removing look for that id? 

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

To remove 

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

You can change the id by class if there is more than one element.

    
31.08.2017 / 21:59
1

In this case the best alternative is to transform this HTML string into elements. So you have a pointer to 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><divclass="item-custom"></div>
    
31.08.2017 / 22:00
Can not set headers after they are sent - NodeJS Open window 1 only