Your tutorials are absolutely amazing mate! Very clear and easy to understand. JavaScript has been my Achilles Heel for the last year, but thanks to your tutorials it's becoming much clearer.
Hey man, I believe in that case you can just simply use remove() method without grabing parent node. Correct me if I'm wrong :) P.S. I really love your channel, keep up good work sir!
Hi Shaun, another great playlist! I would suggest to keep li.parentNode.removeChild(li) since that way the event handling function can be reused on some other elements without the need to change variable 'list' inside the function, or at least to better decouple it from the variables outside its scope, a situation that I often encountered in my experience.
I HAVE INCLUDED BREAK DOWN AND EXPLANATION OF THIS EXAMPLE : HOPE IT HELPS SOMEONE 'use strict' //STEP : 1 //so our task is to fire an click event on all buttons so that when the button is clicked the whole li is deleted //first thing below is to get all the li elements //below i have gotten and put all my buttons under deleteBtn variable let deleteBtn = document.querySelectorAll('#book-list .delete'); //buttons gotten //STEP : 2 //From the group of buttons elements we got, we can now apply or fire the event to a single button element or button // so below we convert the nodelist or html collection into an array and sork on a single button Array.from(deleteBtn).forEach(function(button){ //STEP : 3 //for every single button we click let us apply an event to that particularly clicked button button.addEventListener('click', function(e){ //get the event to work on the item that was selected in our case li //once the button is clicked then we want all the entire li element to be the target of the event //STEP : 4 const li = e.target.parentElement; //STEP : 5 //below we call the action that we want the event to perform on the single element //now call the parent of the button and remove the particular childelement selected in our case the entire li li.parentNode.removeChild(li); }); });
This worked for me, const list = document.querySelector('#book-list ul') list.addEventListener('click',function(e) { if(e.target.matches('.delete')) { const li = e.target.parentElement; li.parentNode.removeChild(li); } });
hi, i dont get the 2:57 ! why if we add another li manually the first code snippet dont run for it? i watched many times and i still dont get it he says because we lready associated event to those .delete buttons but also the new list item can act like others ! help please
This is because, initially, you are cycling through all the *existing* li elements in the book list and adding an event listener to each one. When you add a new li element, it does not have an event listener added to it. The way the second approach works is adding a click listener to the entire ul element, containing all the li elements. When you click anywhere in the in the ul, the event will fire, then check to see if the click event happened on one of the delete buttons. If so, it will remove the li that corresponds to that delete button.
yes, even if we add a new button the way he did, because that button also has the .delete class it should be selected in the forEach loop and get an eventListener; I also did not get why he said it will not have the event listnere...
I agree on this point. I am still not clear on this, even after reading the explanation below about 'existing' li elements. Why does the forEach() loop not see or pick up the new li element when we refresh and run the code again? It still has a class name of 'delete'
Can anyone explain me how that ' e ' Argument of function is working , i mean from where it's getting value ? I am beginner , sorry for stupid question
addEventListener(), takes 2 arguments - one is the event(activity) that took place which in this case is the 'click' ('click' is defined as one of the events, for a complete list refer mozilla documentation) and the second argument is a callback function that can do something on the event that just took place. Hope this helps!
Hello, would this be a much more expensive way to delete the item? var listItems = document.getElementsByTagName("li"); for (var i = 0; i < listItems.length; i++) { listItems[i].onclick = function() {this.parentNode.removeChild(this);} }
I've been watching your tutorials for about 1,5 year now but still i'm regularly getting impressed by how clearly you explain concepts
Thanks Bartosz!
I never understood what people meant by event bubbling until I heard that explanation.
Your tutorials are absolutely amazing mate! Very clear and easy to understand. JavaScript has been my Achilles Heel for the last year, but thanks to your tutorials it's becoming much clearer.
I love this! Such a smart way of adding event listeners!
Just learned about event bubbling but couldn't really wrap my head around it yet ;D
Thank you for this clear explanation!
Thanks, we live in great times. Your tutorials are priceless.
I'm really liking this series so far. So clear! You make it seem so simple :) should have done this earlier!
Thanks Albert, glad you’re liking it 😊
I was struggling to understand parentNodes, childNodes,etc...consequently, event bubbling..but you made it so simple to understand, thanks alooooooot
every time i watch one of your tutorials i add many experiences to my knowledge, please keep to add more value videos
ur born to teach this !
Wow! Very good tutorial in explaining often confusing or intimidating topic! Thanks a lot!
Thanks Rong 😊
Thank you. A newbie guy from 🇲🇾...
Thank you!!! The only explanation I fully understood.
Hey man,
I believe in that case you can just simply use remove() method without grabing parent node. Correct me if I'm wrong :)
P.S. I really love your channel, keep up good work sir!
You are right, if he use : e.target.parentElement.remove();
But the purpose of the course is to show how to traversing through the DOM.
Wrong, it should be like this: e.target.parentElement.parentElement.remove();
it's because remove() is not supported in older/some browsers
Great. I learned about it but till now didn't know why it's used.
Very well explained. Actualy i had problem and was thinking.. why it not works..
WebAssembly? Please, it would be awesome if someone like you explains it
made perfect sense thanks so much!
Good explanation
Very helpful tutorial. Thanks bro.
Great video as always! :)
very good explanation
"What is event bubbling? In basic terms it's the bubbling of events"
Wow, so clear now.
Hi Shaun, another great playlist! I would suggest to keep li.parentNode.removeChild(li) since that way the event handling function can be reused on some other elements without the need to change variable 'list' inside the function, or at least to better decouple it from the variables outside its scope, a situation that I often encountered in my experience.
thanks sensei
I HAVE INCLUDED BREAK DOWN AND EXPLANATION OF THIS EXAMPLE : HOPE IT HELPS SOMEONE
'use strict'
//STEP : 1
//so our task is to fire an click event on all buttons so that when the button is clicked the whole li is deleted
//first thing below is to get all the li elements
//below i have gotten and put all my buttons under deleteBtn variable
let deleteBtn = document.querySelectorAll('#book-list .delete'); //buttons gotten
//STEP : 2
//From the group of buttons elements we got, we can now apply or fire the event to a single button element or button
// so below we convert the nodelist or html collection into an array and sork on a single button
Array.from(deleteBtn).forEach(function(button){
//STEP : 3
//for every single button we click let us apply an event to that particularly clicked button
button.addEventListener('click', function(e){
//get the event to work on the item that was selected in our case li
//once the button is clicked then we want all the entire li element to be the target of the event
//STEP : 4
const li = e.target.parentElement;
//STEP : 5
//below we call the action that we want the event to perform on the single element
//now call the parent of the button and remove the particular childelement selected in our case the entire li
li.parentNode.removeChild(li);
});
});
You can use 'this' inside the event to use the list as well, right?
u rock mate!
what's the theme you were using in Atom?
where could I find the skill at 2:46 when you set your mouse on the line, then it becomes purple color? I really need that skill TT
simple css on hover it border color will be colored
This worked for me,
const list = document.querySelector('#book-list ul')
list.addEventListener('click',function(e)
{
if(e.target.matches('.delete'))
{
const li = e.target.parentElement;
li.parentNode.removeChild(li);
}
});
the code in here in fourth line if(e.target.className == 'delete') { } was not working for me.
Very helpful
OMG!!!! AMAZING
hi, i dont get the 2:57 !
why if we add another li manually the first code snippet dont run for it? i watched many times and i still dont get it
he says because we lready associated event to those .delete buttons but also the new list item can act like others !
help please
This is because, initially, you are cycling through all the *existing* li elements in the book list and adding an event listener to each one. When you add a new li element, it does not have an event listener added to it.
The way the second approach works is adding a click listener to the entire ul element, containing all the li elements. When you click anywhere in the in the ul, the event will fire, then check to see if the click event happened on one of the delete buttons. If so, it will remove the li that corresponds to that delete button.
yes, even if we add a new button the way he did, because that button also has the .delete class it should be selected in the forEach loop and get an eventListener; I also did not get why he said it will not have the event listnere...
Same here! Can anyone explain it? Thank you
@@BookOfSaints So forEach works only for already existing elements. Would it work with for loop if we set condition to be less than li's length?
I agree on this point. I am still not clear on this, even after reading the explanation below about 'existing' li elements. Why does the forEach() loop not see or pick up the new li element when we refresh and run the code again? It still has a class name of 'delete'
do u have the code for that webpage
Can anyone explain me how that ' e ' Argument of function is working , i mean from where it's getting value ?
I am beginner , sorry for stupid question
addEventListener(), takes 2 arguments - one is the event(activity) that took place which in this case is the 'click' ('click' is defined as one of the events, for a complete list refer mozilla documentation) and the second argument is a callback function that can do something on the event that just took place. Hope this helps!
Merci :)
Is .target a method?
Hello, would this be a much more expensive way to delete the item?
var listItems = document.getElementsByTagName("li");
for (var i = 0; i < listItems.length; i++) {
listItems[i].onclick = function() {this.parentNode.removeChild(this);}
}
Yes, because you will be looping every time an event occurs!
bubbling :)
❄️
Please MEAN stack
MERN BETTER FOR ME :)
this hardly explains bubbling...