been working on a thing for fun. I was wondering how I could delete an HTML element if I just clicked it on any website or HTML file. No jquery or other libraries, just vanilla JS. If the question is hard to understand here's an example: -Website loads -I see a p tag or img tag or just any tag and I don't want to see it anymore so I just click it and it deletes. -I'm now happy because of what I've done.
currentCode:
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>What about setting the element's display to none?
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>EDIT: This time without IDs (this is a good intro to event bubbling):
// 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>Here are two ways to achieve the same effect:-
document.getElementById("myDIV").style.display = "none"; // hides element
document.getElementById("myDIV").remove(); // removes element from the DOM