这是一个二十一点游戏。我有一个容器,该容器的第一个子元素是用于克隆卡的模板。如何删除除第一个元素以外的所有子元素?我认为当前代码是“ 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>
为了简洁起见,以下是我删除了多余代码的代码。
您似乎在避免使用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
,,nextElementSibling
和lastElementChild
,这取决于您要执行的操作以及是否需要在其中处理文本节点。有关MDN DOM文档中各种属性的更多信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句