1

Eu tenho vários botões onde no clique do mesmo direciona a uma requisição Ajax passando como parâmetro o id de um produto e por meio de um arquivo externo, segundo o mesmo é adicionado ao carrinho porém isso não é tão relevante assim. Outra coisa não tão importante assim nesse caso é que quando esse botão é clicado seu texto é mudado de "Comprar" para "Remover" e vice-versa. No sucesso dessa requisição, eu pego o retorno que o arquivo externo me traz(um array) e "monto" isso para ser exibido na página HTML. Eu queria saber como posso remover esse .append que faço.

Obs: o HTML é montado em uma classe chamada .item-custom onde no carregamento da página já vem preenchida com outras coisas e se eu uso o código $j('.item-custom').remove(); tudo o que há dentro dessa classe é removido, porém eu só desejo remover o .append() que faço.

Código do botão:

<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>

Código da requisição Ajax:

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;
                  }
              });
            }
5
  • Nessa linha nova que adicionas näo há nenhum botäo para remover? Queres remover carregando no mesmo botäo que criou a linha nova mas que agora diz Remover certo?
    – Sergio
    Commented 31/08/2017 às 19:43
  • Cara eu não sei se entendi bem. vc quer remover apenas = '<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>' ?
    – alan
    Commented 31/08/2017 às 19:47
  • @Sergio Certo, isso mesmo. Commented 31/08/2017 às 19:47
  • @alan Sim, queria remover apenas isso. Commented 31/08/2017 às 19:48
  • se a sua class = "lc-thumbnails" for única você pode fazer isso $('.lc-thumbnails').parents('tr').remove(); ou $('.lc-thumbnails').parent().remove();
    – alan
    Commented 31/08/2017 às 19:53

2 Respostas 2

1

Ja tentou colocar um id na <tr> que esta dentro do .append e na hora de remover procurar por esse id ?

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

Para remover

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

Pode trocar o id por class caso existirá mais de um elemento.

7
  • Nem tinha pensado nessa possibilidade, deu certo, Obrigado! Commented 31/08/2017 às 20:11
  • @MatheusPortela e Serginho, essa solução só funciona para 1 elemento pois os IDs têm de ser únicos... Nesse caso tem de haver alguma lógica para criar um ID diferente para cada linha.
    – Sergio
    Commented 31/08/2017 às 20:13
  • @Sergio Mas no meu caso, quando o botão comprar é clicado, todos os outros que tem ficam inabilitados até que o mesmo que foi clicado com o texto escrito remover seja clicado novamente para que os outros fiquem habilitados para o clique novamente, ou seja, esse id será único, somente de um só, pois o botão com o escrito comprar que irá fazer o .append() só poderá ser clicado somente uma vez e para que ele seja clicado novamente, é obrigatório que o mesmo .append() que foi adicionado, seja retirado. Não sei se você entendeu o que eu quis dizer sobre esse caso. Commented 31/08/2017 às 20:19
  • Voce pode gerar um id dinâmico usando o name do botão.
    – Sérginho
    Commented 31/08/2017 às 20:25
  • @MatheusPortela o problema põe-se se for possível adicionar mais que 1 <tr> de cada vez. Se não podes ter mais que 1 <tr> de cada vez então o problema não se põe e aí o teu problema é bem mais simples. O meu comentário é só de aviso para quem ler a resposta, pois pode gerar bugs. Claro que como eu e o Sérginho referimos é possível criar alguma lógica para gerar IDs dinâmicos e únicos.
    – Sergio
    Commented 31/08/2017 às 20:32
1

Nesse caso a melhor alternativa é transformares essa string de HTML em elementos. Assim tens um ponteiro para eles e podes fazer o botão removê-los assim:

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>

1
  • Obrigado por toda a ajuda e atenção, seu código também funcionou, porém para o meu caso específico, a pergunta que chequei como correta se adequou mais. Mas mesmo assim, te agradeço pela ajuda prestada! Commented 31/08/2017 às 20:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .