I am trying to learn stuff I was used to do in jQuery do in plain JavaScript.
I have example I found on the internet to solve and it really gave me hard time.
I am trying to remove parent div.single
on click on button.remove
.
Here is the code;
var btn = document.getElementsByClassName('remove')
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click',function (e) {
e.parentNode.parentNode.removeChild(e.parentNode);
} , false);
}
<div class="single">
<img src="http://via.placeholder.com/150x150">
<button type="button" class="remove">X1</button>
</div>
<div class="single">
<img src="http://via.placeholder.com/150x150">
<button type="button" class="remove">X2</button>
</div>
<div class="single">
<img src="http://via.placeholder.com/150x150">
<button type="button" class="remove">X3</button>
</div>
<div class="single">
<img src="http://via.placeholder.com/150x150">
<button type="button" class="remove">X4</button>
</div>
I am getting error e.parentNode is undefined
.
Here is the jQuery code which does the same I am after.
$(document).ready(function() {
$(document).on('click', '.remove', function () {
$(this).parent('.single').remove()
})
})
Thanks for any answers.
e.target.parentNode
. Thee
object is the event object, not a node. It is thetarget
property that references the node. – trincot Oct 10 '17 at 11:27e
withthis
inside the method. – gurvinder372 Oct 10 '17 at 11:28