Mi código html contiene un <ul id="users"></ul> , que luego se completa dinámicamente con el código JS
const li = document.createElement("li"); li.appendChild(document.createTextNode(`${nameInput.value} : ${emailInput.value}`) Agregué un botón en el código html para eliminar todos los usuarios en ese <ul> , como tal: <button class="btn" id="del-user-list" onClick="deleteUserList()">Delete User List</button> .
Mi función deleteUserList en el código JS se ve así:
function deleteUserList() { while (userList.firstChild != "") { userList.firstChild.remove(); } } Esto funciona en la superficie, sin embargo, me doy cuenta de que después del último niño, mi función verificará una vez más el valor de un niño que no existe. Recuerdo de estudiar C y jugar con listas enlazadas que no quieres desreferenciar un puntero que apunta a null .
Efectivamente, cuando miro la consola obtengo Uncaught TypeError: Cannot read properties of null (reading 'remove') at deleteUserList (main.js:31:25) at HTMLButtonElement.onclick ((index):29:77)
¿Es esto un problema y qué puedo hacer al respecto? Acabo de empezar a jugar con Javascript y no tengo una buena idea de cómo funcionan esas cosas en este momento.
En lugar de comparar userList.firstChild con una cadena vacía, debe compararlo con null u omitir el operador de comparación por completo:
while (userList.firstChild != null) // or while (userList.firstChild) El último funciona porque convertir null en un valor booleano devuelve false
null != '' siempre será true porque userList.firstChild nunca será una cadena vacía de todos modos. Será un nodo DOM o null .