Menu
I am trying to remove a div when the button inside of it is clicked.
HTML
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
</body>
</html>
Javascript
function registerClickHandler() {
// Register click event handler for button of class 'remove'
"use strict";
var node = document.getElementsByClassName("image");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
var listen = document.getElementbyClassName("remove");
listen.addEventListener("click", registerClickHandler());
So when I click the 'X' button inside of the div, I need it to remove the entire parent div, but it seems like nothing I've tried will work. I'm not sure if maybe I'm not using event handlers the right way or not, or if something I'm doing is just completely wrong. I would like to do this without using jQuery (because I don't really know it) if possible, but a lot of the solutions I've seen for vaguely similar problems have all used jQuery.
Edit:
I forgot to specify that I am looking for a way to accomplish this using eventHandlers.
648
asked Sep 18 '25 08:09
Try Element.closest() you can change element selector by pref
"The Element.closest() method returns the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter. If there isn't such an ancestor, it returns null."
mind that with a "proper selector" you don't have to worry about the parent or grandparent on elements selection
Here is an example.
function setup() {
var els = document.getElementsByClassName("remove");
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function (e) {
e.preventDefault();
e.target.closest('div.image').remove();
});
}
}
setup();
img {
width:100px; height:100px;
}<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
<div class="image">
<div>
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
</div>
<div class="image">
<div>
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove">X</button>
</div>
</div>
<script>
function setup() {
var els = document.getElementsByClassName("remove");
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function (e) {
e.preventDefault();
e.target.closest('div.image').remove();
//e.target.closest('.image').remove();
//this will not work on 2 last images cause parent div will be deleted
//leaving an empty <div class="image"></div> for each removed item
//e.target.closest('div').remove();
});
}
}
setup();
</script>This should work,
<html>
<head>
<script src="test.js"></script>
<script type="text/javascript">
function removeDiv(btn){
((btn.parentNode).parentNode).removeChild(btn.parentNode);
}
</script>
</head>
<body>
<div class="image">
<img src="http://i.imgur.com/VuKnN5P.jpg" alt="First">
<button class="remove" onclick="removeDiv(this);">X</button>
</div>
<div class="image">
<img src="http://i.imgur.com/ee4QOKe.jpg" alt="Second">
<button class="remove" onclick="removeDiv(this);">X</button>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With