estado trabajando en algo por diversión. Me preguntaba cómo podría eliminar un elemento HTML si simplemente hacía clic en él en cualquier sitio web o archivo HTML. No jquery u otras bibliotecas , solo vainilla JS . Si la pregunta es difícil de entender, aquí hay un ejemplo: -El sitio web se carga -Veo una etiqueta ap o una etiqueta img o simplemente cualquier etiqueta y no quiero verla más, así que simplemente hago clic en ella y se elimina. -Ahora estoy feliz por lo que he hecho.
código actual:
window.addEventListener("click", function(i) { //Code to remove something? idk... Not that good with js atm... }, false); window.addEventListener("click", function(e) { const target = e.target; target.remove(); }, false); <button>a</button> <button>a1</button> <p>paragraph...</p> <h1>header...</h1>¿Qué hay de configurar la visualización del elemento en ninguno?
const foo = document.getElementById('foo'); const bar = document.getElementById('bar'); [foo, bar].forEach((el) => { el.addEventListener('click', () => el.style.display = 'none'); }); <div id="foo" style="border: 1px solid black; height: 50px; margin-bottom: 20px;"></div> <div id="bar" style="border: 1px solid red; height: 50px;"></div>EDITAR: esta vez sin ID (esta es una buena introducción al burbujeo de eventos ):
// Look ma, no ids! window.addEventListener('click', (event) => { event.target.style.display = 'none'; }); <div id="foo" style="border: 1px solid black; height: 50px; margin-bottom: 20px;"></div> <div id="bar" style="border: 1px solid red; height: 50px;"></div>Aquí hay dos formas de lograr el mismo efecto: -
document.getElementById("myDIV").style.display = "none"; // hides element document.getElementById("myDIV").remove(); // removes element from the DOM