How can I make the button disappear work in the example below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div id="div1" style="height: 100px; background-color: red;" onclick="parent()">
<button onclick="child()">disapear</button>
</div>
<script>
function parent(elem) {
document.getElementById("div1").style.display = "block";
}
function child(elem) {
document.getElementById("div1").style.display = "none";
}
</script>
</body>
</html>When I click on button disappear I want to call only its function - which is child(). not the parent() function which is when I click the div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
</head>
<body>
<div id="div1" style="height: 100px; background-color: red;" onclick="parent(event)">
<button onclick="child(event)">disapear</button>
</div>
<script>
function parent(elem) {
document.getElementById("div1").style.display = "block";
}
function child(elem) {
elem.stopPropagation();
document.getElementById("div1").style.display = "none";
}
</script>
</body>
</html>