javascript - 如何设置复杂的 jquery 函数？

Question

我有一个 html 和 jquery 代码。我能够删除 ul 元素的第一个 li 子元素。问题是我只能删除一次并且只能删除一个元素。我想以一种方式让用户每次单击按钮时都可以删除该元素。

我不想有任何限制。或者如何设置限制？

这是我的标记:

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

和使用 jQuery 的 JavaScript:

$(document).ready(function(){
    $("button").click(function(){
        $("ul li:first").hide();
    });
});

Answer 1

如果你想在每次点击按钮时删除 li 元素，你应该使用 remove() 而不是 hide() hide() 仅更改元素的可见性，不会将其移除，下一次单击按钮会将相同 元素标记为隐藏(没有实际效果)。请参阅文档:remove()和 hide() .

$(document).ready(function(){
    $("button").click(function(){
        $("ul li:first").remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button id="myBtn">Hide</button>