Creé una página de nueva pestaña simple similar a los navegadores web, pero cuando creo una nueva pestaña y presiono el ícono x para activar closetab (), cierra todas las pestañas y no las elimina en orden una por una. ¿Cómo hago que cada uno de los elementos adjuntos sea único?
JS:
function addTab() { var img = document.createElement("img"); img.src = "resources/img/delete-icon.svg"; img.className = 'deleteicon'; img.id = "deletetab"; img.onclick = closeTab; var ulLocation = document.getElementsByClassName('abc')[0]; var whereTab = document.getElementById('listid'); var addTab = document.createElement('li'); addTab.className = 'first-tab'; addTab.id = "listid"; addTab.className = 'active'; addTab.innerHTML = "mozilla-firefox/newtab"; addTab.appendChild(img2); ulLocation.appendChild(addTab); addTab.appendChild(img); } function closeTab() { var whereTab = document.getElementById('listid'); if (whereTab.style.display == 'block') { whereTab.style.display = 'none'; } else { whereTab.style.display = "none"; } }Tienes al menos 2 opciones. Una es apuntar a la pestaña activa y cerrarla cuando se hace clic en la X. Esto supone que solo tiene una pestaña activa a la vez (indicada por una clase active , por ejemplo).
function closeTab(event) { document.querySelector('li.tab.active').remove(); } Otra opción es hacer referencia a la pestaña relativa al icono de cierre, al que puede hacer referencia en el argumento de event de su oyente de clics. Dado que los está agregando dinámicamente, puede simplemente eliminarlos con el clic de eliminar en lugar de ocultarlos. Algo como:
function closeTab(event) { event.target.closest('li.tab').remove(); } En estos ejemplos, ha establecido un nombre de clase para que sus contenedores de pestañas sean tab .