Only the first element of the list is removed, why?

Question

JavaScript

var removeC = document.querySelector('li');
for (var i = 0; i < removeC.length; i++) {
removeC[i].onclick = function() {
if (removeC.parentNode){
removeC.parentNode.removeChild(removeC);
removeC.removeChild(removeC);
}
}
}
removeC.onclick = function(){
if (removeC.parentNode) {
removeC.parentNode.removeChild(removeC);
}
}
Why does the function apply only to the first element? How to make it apply to all elements and which will be created using the button, but if you delete the already created li and create using the button, it does not even remove the first one, as before

Answer 1

You initially have only one first element in removeC, not all. Use querySelectorAll
In the second part of the question, as I understand it, you are asking why it does not constantly hang events on newly added elements? Well, because it passes through the elements once when called and that's it, and new ones are already created without this event