如何删除除第一个元素外的所有子元素?

史蒂夫

这是一个二十一点游戏。我有一个容器,该容器的第一个子元素是用于克隆卡的模板。如何删除除第一个元素以外的所有子元素?我认为当前代码是“ clearContainer”方法,它删除了所有子元素。

function makeCardPlayer() {
    // .card is created in the template card css class
    var card = $(".card.templatePlayer").clone();
    
    //card.removeClass("templatePlayer");      
    card.addClass("newCard");              
    $("#cardContainerPlayer").append(card);        
}

function clearContainer() {
    debugger
    //$("cardContainerPlayer > *").slice(1).remove();

    var myNode = document.getElementById("cardContainerPlayer");
    var fc = myNode.firstChild;
    var sib = fc && fc.nextSibling;
    while (myNode.lastChild && myNode.lastChild !== sib) {
        myNode.removeChild(myNode.lastChild);
    }
}

makeCardPlayer();    
clearContainer();
#cardContainerPlayer {
        display: flex;
        flex-wrap: wrap;
    }

    .card {
        display: inline-block;
        vertical-align: top; 
        text-align: center;
        margin: 5px;
        padding: 10px;
        width: 70px;
        height: 100px;
        font-size: 26px;
        background-color: black;
        border: solid 1px black;
        color: white;
        border-radius: 10px;
    }

    .newCard {
        display: inline-block;
        vertical-align: top;
        text-align: center;
        margin: 5px;
        padding: 10px;
        width: 70px;
        height: 100px;
        font-size: 26px;
        background-color: yellow;
        border: solid 1px black;
        color: white;
        border-radius: 10px;
    }

    .templatePlayer {
        /*display: none;*/
    }
<!DOCTYPE html>
<html>

<body>
  <div id="cardContainerPlayer">
    <div class="card templatePlayer">
      <span class="playerCardFace"></span>
      <span class="playerCardSuit"></span>
    </div>
  </div>
</body>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

为了简洁起见,以下是我删除了多余代码的代码。

TJ人群

您似乎在避免使用jQuery clearContainer如果要使用该功能,则

function clearContainer() {
    $("#cardContainerPlayer > *").slice(1).remove();
}

这将选择容器的所有子元素,并用于slice获取第一个元素之后的一组子元素,然后将其删除。

如果要直接使用DOM:

function clearContainer() {
    var myNode = document.getElementById("cardContainerPlayer");
    var fc = myNode.firstChild;
    var sib = fc && fc.nextSibling;
    while (myNode.lastChild && myNode.lastChild !== sib) {
        myNode.removeChild(myNode.lastChild);
    }
}

或者,您可以使用firstElementChild,,nextElementSiblinglastElementChild,这取决于您要执行的操作以及是否需要在其中处理文本节点。有关MDN DOM文档中各种属性的更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

选择除第一个元素外的所有子元素

如何从Java中的ArrayList中删除除第一个元素外的所有内容

除矩阵的除第一个元素外的所有元素

如何使用 JQuery 删除除第一个 div 之外的所有子 div 元素?

使用CSS3选择除第一个元素外的所有元素

通过JavaScript隐藏DataList的除第一个元素外的所有元素

CSS - 隐藏除第一个之外的所有同类元素 - 不是子元素

c ++ 98,向量,删除除第一个元素之外的所有元素

如何从数组中删除除JavaScript中的第一个元素以外的所有元素

如何加入数组中除第一个元素之外的所有元素?

检查除第一个元素外的所有元素是否都具有特定类

jQuery / JavaScript:如何删除第一个<li>中除<a> text </a>之外的所有元素

将列表中除第一个元素外的所有元素连接到字符串

如何删除HTML表中的所有<tr>元素(第一个元素除外)

从表中删除所有子元素,除了第一个?

如何取除第一个 k 以外的所有元素

Scala / Spark-如何获取所有子数组的第一个元素

为除第一个元素以外的所有元素实现代码

除第一个元素之外的所有元素的分段错误

如何在Matlab中获取矩阵的除第一个元素以外的所有元素?

需要一个数组,其中新数组的第一个元素=除第一个元素以外的所有元素的和

如何从当前片段中删除除当前片段和第一个片段外的所有先前片段?

如何删除文件中除第一个字符外的所有行?

jQuery删除除第一个表外的所有表行

Javascript:删除div中除一个元素外的所有元素

如何删除mysql_query的第一个元素并获取其余所有元素?

如何删除每个元素的第一个元素

删除所有重复的类元素,第一个元素除外

使用纯CSS隐藏除元素的第一个孩子之外的所有孩子