Beispiel:JS-DOM-Tut-8.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
p, li {width: 60%; background:#ffebe6; margin-top:5px;}
aside, div {float:right; clear:right; width:33%; height: 20%; background:#e6f2f7; margin-top:5px;}
h2, h3, h4 {background:#ffebe6; margin-top:5px; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('click', removeElement);
function removeElement(e) {
let elem = e.target;
const main = document.querySelector('main');
if (main != elem) {
let parent = elem.parentNode;
parent.removeChild( elem);
return false;
}
}
});
</script>
<title>DOM-Tutorial Beispiel 8</title>
</head>
<body>
<h1>DOM-Tutorial Beispiel 8 - Entfernen von Elementen</h1>
<main>
<h2>Ober-Überschrift</h2>
<p>Klicken Sie irgendwo auf die Seite. Das Element wird dann gelöscht.</p>
<div>
<h3>Überschrift-Div</h3>
<p>Absatz-Div</p>
</div>
<aside>
<h3>Überschrift-aside</h3>
<p>Absatz-aside</p>
</aside>
<h3>Unter-Überschrift</h3>
<ul>
<li>Pizza</li>
<li>Pasta</li>
<li>Prosciutto</li>
</ul>
<h3>Unter-Überschrift</h3>
<ol>
<li>Pizza</li>
<li>Pasta</li>
<li>Prosciutto</li>
</ol>
<p>Das main-Element ist gesperrt.</p>
</main>
</body>
</html>