1

Estou começando nos estudos de Javascript e várias duvidas vem surgindo conforme vou fazendo exercícios, esse em específico eu não consegui achar um conteúdo em português que explicasse bem.

Seguinte, tenho dois botões: um que adiciona um item e outro que remove esse item adicionado. O problema é que eu não estou conseguindo achar uma maneira de remover sempre o último item adicionado ao clicar no botão de remover. Só consegui fazer funcionar removendo todos os itens de uma vez.

<div class="adicionar-produtos">
<button id="remove-vip" class="btn-produtos"> - </button>
<button id="add-vip" class="btn-produtos">+</button>
</div>

Ao clicar no botão o item é adicionado aqui:

<div class="item-adicionado">
 <p class="item-adicionado-main"> </p>
 </div>

Javascript:

var botao_adicionar_vip = document.querySelector("button#add-vip");
var containerItemAdicionado = document.querySelector(".item-adicionado-main");
var botao_remover_vip = document.querySelector("#remove-vip");



botao_adicionar_vip.onclick = function() {

item_vip = document.createElement("p");
item_vip_text = document.createTextNode("Item Vip 1");
item_vip.className = "teste1";
item_vip.appendChild(item_vip_text);
containerItemAdicionado.appendChild(item_vip);

};


botao_remover_vip.onclick = function() {
document.querySelectorAll('.teste1').forEach(e => e.remove());
};

https://jsfiddle.net/wjykgxdn/

2 Respostas 2

4

Você está removendo todos os elementos por causa deste excerto do seu código:

document.querySelectorAll('.teste1').forEach(e => e.remove());

Ele basicamente irá selecionar todos os elementos adicionados e iterar sobre cada um deles, removendo-os individualmente.

Você precisa selecionar o último elemento dentro do elemento .teste1. Existem diversas formas para selecionar o último elemento.

Utilizar o pseudo-seletor :last-child

const element = document.querySelector('.teste1 > *:last-child');

if (element) {
  element.remove();
}

Isso fará com que você selecione o último filho que estiver dentro do primeiro elemento encontrado com a classe .classe1. Para isso, utilizamos o pseudo-seletor :last-child.

Se o seu ambiente suportar, você pode inclusive utilizar a nova sintaxe de encadeamento opcional (optional chaining), introduzida na versão mais recente do ECMAScript:

document.querySelector('.teste1 > *:last-child')?.remove();

Um exemplo funcional:

const button = document.querySelector('.remove');

button.addEventListener('click', () => {
  const element = document.querySelector('.teste1 > *:last-child');
  
  if (element) {
    element.remove();
  }
});
<button class="remove">Remover Último</button>

<div class="teste1">
  <div>Filho 01</div>
  <div>Filho 02</div>
  <div>Filho 03</div>
  <div>Filho 04</div>
</div>

Utilizar a API ParentNode.lastElementChild

Essa é uma API "nativa" do JavaScript. É mais antiga, o que dá um suporte maior para ambientes legados. É também um pouco mais simples, já que não são envolvidos pseudo-seletores CSS.

Veja:

const button = document.querySelector('.remove');

button.addEventListener('click', () => {
  const parent = document.querySelector('.teste1');
  const element = parent.lastElementChild;
  
  if (element) {
    element.remove();
  }
});
<button class="remove">Remover Último</button>

<div class="teste1">
  <div>Filho 01</div>
  <div>Filho 02</div>
  <div>Filho 03</div>
  <div>Filho 04</div>
</div>

Se o ambiente suportar, você também pode fazer o uso da nova sintaxe de encadeamento opcional para evitar a declaração if.

Obter todos os filhos e selecionar o último elemento do array

Por fim, você pode obter todos os filhos utilizando a API ParentNode.children, que retorna um HTMLCollection (um tipo de array, mas com algumas diferenças). A partir dessa coleção, basta obter o seu último elemento.

Assim:

const button = document.querySelector('.remove');

button.addEventListener('click', () => {
  const parent = document.querySelector('.teste1');
  const children = parent.children;
  const element = children[children.length - 1];
  
  if (element) {
    element.remove();
  }
});
<button class="remove">Remover Último</button>

<div class="teste1">
  <div>Filho 01</div>
  <div>Filho 02</div>
  <div>Filho 03</div>
  <div>Filho 04</div>
</div>

Com certeza existem mais formas de se fazer isso, mas pararei por aqui. :)

0
3

Seu forEach está removendo todos.

Pode fazer assim para remover o último:

botao_remover_vip.onclick = function() {
   const itens = document.querySelectorAll('.teste1');
   if(itens.length){
      itens[itens.length-1].remove();
   }
};

Primeiro cria uma variável itens que seleciona todos os elementos criados:

const itens = document.querySelectorAll('.teste1');

Depois um if para verificar se existe pelo menos um item:

if(itens.length){

Se existir, você remove o último, que é o tamanho da variável itens -1. O querySelectorAll cria um nodelist onde cada elemento possui um índice com base 0, igual a uma array, onde o número de elementos no nodelist é igual ao tamanho total -1:

itens[itens.length-1].remove();

Veja funcionando:

var botao_adicionar_vip = document.querySelector("button#add-vip");
var containerItemAdicionado = document.querySelector(".item-adicionado-main");
var botao_remover_vip = document.querySelector("#remove-vip");

botao_adicionar_vip.onclick = function() {

   item_vip = document.createElement("p");
   item_vip_text = document.createTextNode("Item Vip 1");
   item_vip.className = "teste1";
   item_vip.appendChild(item_vip_text);
   containerItemAdicionado.appendChild(item_vip);

};


botao_remover_vip.onclick = function() {
   const itens = document.querySelectorAll('.teste1');
   if(itens.length){
      itens[itens.length-1].remove();
   }
};
<div class="adicionar-produtos">
<button id="remove-vip" class="btn-produtos"> - </button>
<button id="add-vip" class="btn-produtos">+</button>
</div>
<div class="item-adicionado">
 <p class="item-adicionado-main"> </p>
 </div>

Procure declarar suas variáveis com var, let ou const (dependendo do caso. Veja mais informações neste tópico) para evitar variáveis globais. Por exemplo:

let item_vip = document.createElement("p");

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 .