querySelectorAll no funciona
Tengo un requisito donde tengo que recoger el último..div
dentro de un contenedor y aplicarle alguna lógica empresarial. La selección de los últimos..div
tiene que ser dinámico porque el usuario tiene la opción de agregar / eliminar.div
elementos.
Inicialmente lo intenté conquerySelectorAll
Pero no pareció funcionar. Así que decidí cambiarlo agetElementsByClassName
Y sorprendentemente funcionó con la misma lógica. ¿Puede alguien ayudarme con la razón por la que elremove_div
no funciona mientras que el segundo (remove_div_2
) ¿hace?
Nota: No estoy buscando una solución / solución al problema porque ya he seguido con la segunda opción. Solo quiero saber la razón por la cual la opción conquerySelectorAll
no funciona
A continuación se muestra mi código:
HTML:
<div id='container'>
<div id='div1' class='div'>This is Div 1</div>
<div id='div2' class='div'>This is Div 2</div>
<div id='div3' class='div'>This is Div 3</div>
</div>
<button type='button' id='append_div'>Append Div</button>
<button type='button' id='remove_div'>Remove Div</button>
<button type='button' id='remove_div_2'>Remove Div 2</button>
JavaScript:
window.onload = function () {
var elementToStyle = document.querySelectorAll("#container .div");
elementToStyle[elementToStyle.length - 1].classList.add('red');
document.getElementById('append_div').onclick = function () {
var divToInsert = document.createElement('div');
divToInsert.id = 'new_div';
divToInsert.className = 'div';
divToInsert.innerHTML = 'This is an appended div';
document.getElementById('container').appendChild(divToInsert);
var elToStyle = document.querySelectorAll("#container .div");
for (i = 0; i < elToStyle.length; i++)
elToStyle[i].classList.remove('red');
elToStyle[elToStyle.length - 1].classList.add('red');
};
document.getElementById('remove_div').onclick = function () {
var elToStyle = document.querySelectorAll("#container .div");
document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
elToStyle[elToStyle.length - 1].classList.add('red');
};
document.getElementById('remove_div_2').onclick = function () {
var elToStyle = document.getElementsByClassName('div');
document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
elToStyle[elToStyle.length - 1].classList.add('red');
};
}