Question

这是一个BlackJack游戏。我有一个容器，第一个子元素是用于克隆卡的模板。如何删除除第一个元素以外的所有子元素？我认为当前代码是“ 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>

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

Answer 1

您似乎在$("#Allcheck").click(function(){ $('input:checkbox').not(this).prop('checked', this.checked); });中避免使用jQuery。如果您想使用该功能，那么

clearContainer

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

如果您想直接使用DOM：

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

或者您可以使用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和nextElementSibling，这取决于您要执行的操作以及是否需要处理其中的文本节点。有关MDN's DOM documentation中各种属性的更多信息。

Answer 2

您应该使用nextSibling（）方法来查找和删除第一个孩子的每个兄弟姐妹：

function clearContainer() {
    debugger
    var myNode = document.getElementById("cardContainerPlayer");
    var fc = myNode.firstChild;

    while (fc.nextSibling) {
        myNode.removeChild(fc.nextSibling);
    }
}

Answer 3

在您的clearContainer()方法中，您可以使用类似的

function clearContainer() {
  debugger
  var myNode = document.getElementById("cardContainerPlayer");
  var fc = myNode.firstChild;

  while (fc.nextSibling) {
    myNode.removeChild(fc.nextSibling);
  }
}

通过删除孩子的下一个兄弟姐妹，最后您将只剩下firstChild。

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

3 个答案: