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

Question

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

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

这是我的标记：

<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>

Answer 2

你说你想删除然后你可以像这样使用删除：

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

Answer 3

发生这种情况的原因是因为当您使用hide()

它只隐藏到元素，它仍然存在。因此，当您引用列表的第一个时，它会尝试 hide() 已经隐藏的那个。

我认为你的意思是删除第一个，然后如果你再次执行该功能，它会删除下一个。

尝试remove()

删除元素。

所以

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

Answer 4

首先，选择:first器选择第一个匹配的元素。
您正在寻找:first-child Selectorwhich选择作为其父级的第一个子级的所有元素。 这就是为什么当与 hide() 结合使用时，只能工作一次。

接下来，hide()是等效于"display", "none"
如果您想在每次删除后引用新的第一个孩子的 CSS，请尝试使用remove()。
这将从 DOM 中永久删除子元素，并允许您的代码引用最新的 li 元素。

• 咖啡
• 牛奶
• 茶

清单 2：

• 咖啡
• 牛奶
• 茶

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

Answer 5

这是另一个解决方案

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

<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>

Answer 6

:visible如果您想隐藏而不是删除它，您也可以使用选择器。这将仅搜索所有可见li的 s。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>