Удалите случайный пункт списка

Question

Дана кнопка и список ul, заполненный пунктами. По клику на кнопку удалите случайный пункт списка

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>press me</button>
    <ul>
      <li>text</li>
      <li>text</li>
      <li>text</li>
      <li>text</li>
    </ul>
    <script>
      document.querySelector("button").addEventListener("click", function () {
<Один вариант удаления из списка>
        // let oList = document.querySelector("ul");
        // let remove = oList.removeChild(oList.lastChild);
<Второй вариант удаления из списка>
        let remove = document.querySelector('li').remove();
      });
    </script>
  </body>
</html>

Сначала я думал, что нужно создать массив из li и удалять из него по рандомному индексу, который можно сгенерировать как-то так:

      let arr = [...document.querySelectorAll("li")]
            for (const element in lis) {
              document
                .querySelector("button")
                .addEventListener("click", function () {
             let random = Math.ceil(Math.random()*arr.length)
             document.querySelector('li').remove(random)
                });
            }

но получается какая-то дичь

Answer 1

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

Массив arr необходимо обновлять каждый раз при клике на кнопку

Метод remove() применяется к самому элементу, а не к его индексу, поэтому нужно сначала выбрать случайный элемент из массива, а затем вызвать remove() на этом элементе

Заменю Math.ceil() на Math.floor()

let button = document.querySelector("button");

button.addEventListener("click", function () {
  let arr = [...document.querySelectorAll("li")]; // Обновляем массив с элементами списка
  /* Проверка спасет тебя от случайной ошибки. (пр:если список вдруг пуст). 
  Всегда проверяй, прежде чем действовать! ? */
  if (arr.length > 0) {
    let randomIndex = Math.floor(Math.random() * arr.length);
    arr[randomIndex].remove(); // Удаляем элемент с случайным индексом
  }
});

let button = document.querySelector("button");

button.addEventListener("click", function() {
  let arr = [...document.querySelectorAll("li")]; // Обновляем массив с элементами списка
  if (arr.length > 0) {
    let randomIndex = Math.floor(Math.random() * arr.length);
    arr[randomIndex].remove(); // Удаляем элемент с случайным индексом
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button>press me</button>
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>

</body>

</html>

БЛОГ НА HUSL

Удалите случайный пункт списка

Ответы (1 шт):