How to I remove all the child element except the first element?
Question
It is a BlackJack game. I have a container which the first child element is a template for cloning card purpose. How to I remove all the child elements except the first element? I think the current code which is the "clearContainer" method remove all child elements.
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>
Here are the code which I have removed out extra codes for brevity.
3 answers
solution1
1 ACCPTED 2019-05-03 13:21:21
YOu seem to be avoiding jQuery in clearContainer . If you want to use it that function, then
function clearContainer() {
$("#cardContainerPlayer > *").slice(1).remove();
}
That selects all child elements of the container and uses slice to get a set of only the ones after the first one, then removes them.
If you want to use the DOM directly:
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);
}
}
Or you might use firstElementChild , nextElementSibling , and lastElementChild , depending on what you want to do and whether you need to handle text nodes in there. More on those various properties in MDN's DOM documentation .
solution2
1 2019-05-03 13:23:33
You should use the nextSibling() method to find and delete every sibling of the 1st child :
function clearContainer() {
debugger
var myNode = document.getElementById("cardContainerPlayer");
var fc = myNode.firstChild;
while (fc.nextSibling) {
myNode.removeChild(fc.nextSibling);
}
}
solution3
1 2019-05-03 13:24:03
In your clearContainer() method, you can use something like this
function clearContainer() {
debugger
var myNode = document.getElementById("cardContainerPlayer");
var fc = myNode.firstChild;
while (fc.nextSibling) {
myNode.removeChild(fc.nextSibling);
}
}
By removing the next sibling of the child, at the end you will be left just with the firstChild.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.