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()。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

时

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

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

尝试remove()

删除元素。

所以

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

Answer 3

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

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

Answer 4

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

接下来， hide（）是相当于"display", "none"的CSS 如果您想在每次删除后参考新的第一个孩子，请尝试使用删除（） 这将永久删除DOM中的子项，并允许您的代码引用最新的li元素。

咖啡
奶
茶

清单2：

咖啡
奶
茶

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

Answer 5

这是另一种解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

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

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

如何设置复杂的jquery函数？

6 个答案: