Tengo esta confusión desde hace mucho tiempo, quiero agregar un elemento específico como el span en el ejemplo entre las etiquetas h1 y h2, pero cuando hago clic en el botón, los agregó como el último elemento secundario del contenedor, Quiero agregar en el medio de las etiquetas h1 y h2, y en el botón Eliminar, quiero eliminar solo ese elemento específico en lugar de eliminar todos los elementos, ¿cómo puedo eliminar ese elemento específico cuando hago clic en el botón?
const container = document.querySelector('.container'); const btnAdd = document.querySelector('.btnAdd'); const btnRemove = document.querySelector('.btnRemove'); btnAdd.addEventListener('click', () => { container.innerHTML += `<span>Remove or Add me</span>`; }) btnRemove.addEventListener('click', () => { container.innerHTML += ``; }) <div class="container"> <h1>Element</h1> <h2>Element</h2> </div> <button class="btnAdd">Add</button> <button class="btnRemove">Remove</button>Necesita algunas líneas más de código para crear un elemento de intervalo y trabajar con él en los controladores de eventos:
const container = document.querySelector('.container'); const btnAdd = document.querySelector('.btnAdd'); const btnRemove = document.querySelector('.btnRemove'); const h2 = document.querySelector('h2'); let addClicked = false; const newNode = document.createElement('span'); btnAdd.addEventListener('click', () => { if(addClicked) { return; } newNode.innerHTML = 'Remove or Add me'; container.insertBefore(newNode, h2); addClicked = true; }) btnRemove.addEventListener('click', () => { newNode.remove(); addClicked = false; }) <div class="container"> <h1>Element</h1> <h2>Element</h2> </div> <button class="btnAdd">Add</button> <button class="btnRemove">Remove</button>La otra respuesta solo le permite agregar/eliminar un solo elemento.
Actualicé su fragmento como puede ejecutarlo a continuación; esto le permite seguir agregando elementos (primero creando un elemento span con javascript y luego usando el método insertBefore en el elemento h2 para insertarlo dinámicamente).
El botón Eliminar siempre elimina el último elemento que se agregó, lo que permite una lista más dinámica.
Puede llevar esto un paso más allá y agregar un botón de eliminación dentro de cada tramo, que al hacer clic, eliminará cualquier elemento donde sea que esté.
const container = document.querySelector('.container'); const btnAdd = document.querySelector('.btnAdd'); const btnRemove = document.querySelector('.btnRemove'); const lastElement = document.getElementById('last-element'); btnAdd.addEventListener('click', () => { const newSpan = document.createElement('span'); newSpan.innerHTML = 'Remove or add me'; container.insertBefore(newSpan, lastElement); }) btnRemove.addEventListener('click', () => { const lastSpan = Array.from(document.querySelectorAll('.container > span')).pop(); if (lastSpan) { container.removeChild(lastSpan); } }) <div class="container"> <h1 id="first-element">Element</h1> <h2 id="last-element">Element</h2> </div> <button class="btnAdd">Add</button> <button class="btnRemove">Remove</button>textContent en lugar de innerHTML . Porque es más seguro y rápido que innerHTML const btnAdd = document.querySelector('.btnAdd'); const btnRemove = document.querySelector('.btnRemove'); const text = document.querySelector('.text'); btnAdd.addEventListener('click', () => { text.textContent = 'Remove or Add me' }) btnRemove.addEventListener('click', () => { text.textContent = ''; }) <div class="container"> <h1>Element</h1> <span class="text"></span> <h2>Element</h2> </div> <button class="btnAdd">Add</button> <button class="btnRemove">Remove</button>Si no puede definir el elemento en html, puede probar este código en su lugar.
const container = document.querySelector(".container"); const h1 = document.querySelector(".container > h1"); const btnAdd = document.querySelector(".btnAdd"); const btnRemove = document.querySelector(".btnRemove"); btnAdd.addEventListener("click", () => { h1.insertAdjacentHTML("afterend", "<span>Remove or Add me</span>"); }); btnRemove.addEventListener("click", () => { const text = document.querySelector("h1 + span"); container.removeChild(text); }); <div class="container"> <h1>Element</h1> <h2>Element</h2> </div> <button class="btnAdd">Add</button> <button class="btnRemove">Remove</button>