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>
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. :)