Question

因此，我试图每次单击按钮时从有序列表中删除第一项。

HTML：

<ol class="rem">
   <li>First item</li>
   <li>Second item</li>
   <li>Third item</li>
</ol>
<button onclick="eliminate()">Eliminate</button>

Javascript：

function eliminate(){
   $('ol.rem li:first-child').remove();
}

function eliminate() {
  $('ol.rem li:first-child').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="rem">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
<button onclick="eliminate()">Eliminate</button>

我一直在阅读其他人的做法，但似乎无法使地雷正常工作。无论我尝试哪种方法，似乎都无济于事。我正在做的事情是我没看到的错误吗？

我也这样导入了jQuery：

<script src="jquery-3.3.1.min.js"></script>

谢谢！

Answer 1

问题在于您的代码中没有包含jQuery，这是基于注释中提供的屏幕截图。

查看底部的演示，以了解不使用jQuery如何完成

解决方案

在文档的<head>标签之间添加此标签

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

工作代码（复制/粘贴并尝试）

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

    <head>
        <meta charset="UTF-8">
        <title>Blog</title>
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
        <script>
            function eliminate() {
                $('ol.rem li:first-child').remove();
            }
        </script>

    </head>

    <body>
        <section>
            <h2>Hello</h2>
            <ol class="rem">
                <li>First Item</li>
                <li>Second Item</li>
                <li>Third Item</li>
                <li>Fourth Item</li>
                <li>Fifth Item</li>
            </ol>
            <button onclick="eliminate()">Eliminate</button>
        </section>
    </body>
</html>

没有jQuery版本

取决于您需要jQuery的用途，您可能根本不需要使用它。该代码使用Vanilla（常规）JavaScript完成相同的功能。

function eliminate() {
  document.querySelector('ol.rem li:first-child').remove();
}

<section>
  <h2>Hello</h2>
  <ol class="rem">
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
    <li>Fifth Item</li>
  </ol>
  <button onclick="eliminate()">Eliminate</button>
</section>

无法删除有序列表中的第一项？

1 个答案:

解决方案

工作代码（复制/粘贴并尝试）

没有jQuery版本