javascript - 如何在DOM中删除第20个元素？

我每个站点有3个标签列表，其中标签数量未知。我要存档的内容是，在剪下20个标签之后，列表被剪切，并在第20个标签后面附加了一个链接，显示“显示更多”，单击后将显示其余标签。

这是我的标记：

<div class="taglist example-one">
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
</div>

我想不需要CSS。如果需要，请告诉我。

我的js开始于：

$(".taglist").each(function(){
    var tags = $(this).find(".tag");
    tags = tags.length;
    if(tags > 20) {
        // do stuff
    }
    else {
        // do stuff
    }
});

任何帮助表示赞赏！谢谢！

最佳答案

您可以使用greater than index jQuery选择器，插入一个按钮并设置相关的单击处理程序。例如：

$('.tag:gt(19)').hide();
$('<button/>', {text: "Show more..."}).on('click', function(){
   $('.tag:gt(19)').show();
   $(this).remove();
}).insertAfter('.tag:eq(20)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="taglist example-one">
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
 <div class="tag">Example</div>
</div>

关于javascript - 如何在DOM中删除第20个元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37746950/