Tengo este código que elimina elementos en la clase btn-danger. Solo quiero saber qué puedo usar en lugar de for loop para hacer que el código sea más limpio:
var removeCartItemButtons = document.getElementsByClassName('btn-danger'); for (var i = 0; i < removeCartItemButtons.length; i++) { var button = removeCartItemButtons[i]; button.addEventListener('click', function (e) { var buttonClicked = e.target; buttonClicked.parentElement.parentElement.remove(); }); }Mejora general
let en lugar de var . Mira estoconst en lugar de let .document.querySelectorAll() o document.querySelector() son en algunos casos (como en su caso) mejores que getElementsByClassName o getElementById o getElementsByTagName .forEach es generalmente una opción mejor (más legible) que un bucle for . ( querySelectorAll devuelve una lista de nodos estáticos. No necesita Array.from , pero si desea usar otros métodos específicos de Array, use Array.from como señaló @Yousaf)function en el ámbito global y para las propiedades de Object.prototype . Utilice class para constructores de objetos. Use => en cualquier otro lugar. Mira esto.Así es como lo habría escrito
document.querySelectorAll('.btn-danger').forEach(btn=>btn.addEventListener('click',e=>e.target.parentElement.parentElement.remove()))Su código se puede acortar a:
Array.from(document.getElementsByClassName('btn-danger')).forEach((button) => { button.addEventListener('click', (e) => { e.target.parentElement.parentElement.remove(); }); });Esto usa:
Array.from().forEach() : Dado que las funciones de matriz se pueden reescribir sin {} , una sola línea se vería así:
Array.from(document.getElementsByClassName('btn-danger')).forEach((button) => button.addEventListener('click', (e) => e.target.parentElement.parentElement.remove()));