主页 / 问题 / 1592249
Accepted
alexWithoutBeard
Asked:2024-08-29 17:55:12 +0800 CST2024-08-29 17:55:12 +0800 CST

删除随机列表项

  • 772

给定一个按钮和一个充满项目的列表 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)
                });
            }

但结果有点疯狂

javascript

1 个回答

  1. Best Answer

    您走在正确的轨道上，您删除随机列表项的想法几乎是正确的。有一些错误，我会尝试修复您的代码

    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>

    • 3

相关问题