Ошибка в методе предупреждения

Question

У меня есть этот код ниже, но когда пользователь удаляет все узлы списка, я имею в виду все <li>, должно появиться сообщение alert, когда нажата кнопка Limpar Lista и больше нет узлов для удаления, но это появляется ошибка:

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at HTMLInputElement.removeElement (script.js:26)

const $list = document.querySelector('ul')
const $product = document.querySelector('#product')
const $btn = document.querySelector('#btn')
const $reset = document.querySelector('#reset')
 
$btn.addEventListener('click', addProduct)
 
function addProduct() {
    const $item = `<li>${$product.value}</li>`
    $list.innerHTML += $item
    $product.value = ''
    $product.focus()
}
 
$product.addEventListener('keydown', (e) => {
    if (e.keyCode === 13) {
        addProduct()
    }
})
 
$reset.addEventListener('click', removeElement)
 
function removeElement() {
    // Removes an element from the document
    const $ul = document.getElementById("list");
    $ul.removeChild($ul.children[0])
    if($product = '') {
        alert('A lista está vazia')
    }
}

Answer 1

Если я правильно понимаю, ваша проблема в том, что при нажатии кнопки удаления не осталось тегов <li>. Если это так, проблема в том, что вы выбираете первый элемент массива, который не существует или пуст. Проверка массива должна исправить это:

if($ul.children[0]) {
    $ul.removeChild($ul.children[0])
}

Answer 2

Когда список пуст, этот оператор вернет undefined:

$ul.children[0]

Добавьте тест для этого, чтобы вы удаляли только элемент, если он есть. В противном случае показывать предупреждение, если первого элемента нет.

if ($ul.children[0] != undefined) {
  $ul.removeChild($ul.children[0]);
}
else {
  alert("...");
}