How i can remove last element I entered , all element if i wanted?

Question

  // Initializing the Stack Class function Stack() { this.dataStore = []; this.top = 0; this.push = push; // Inserting the element in Stack this.pop = pop; //Removing the element in Stack this.peek = peek; this.clear = clear; this.length = length; } // Adding an element in Stack function push(element) { this.dataStore[this.top++] = element; } function peek() { return this.dataStore[this.top - 1]; } // Removing an element from the given stack function pop() { return this.dataStore[-this.top]; } function clear() { this.top = 0; } function length() { return this.top; } var s = new Stack(); function pushContainer(el) { //console.log(el); var x = document.getElementById("container"); x.appendChild(el); } function pushToStack(el) { // var newElement = document.createElement("p"); var Textnode = document.createTextNode(el); newElement.appendChild(Textnode); pushContainer(newElement); console.log(s.top) s.push(el); } function popFromStack(){ s.pop(); console.log(s.length()) } function clearStack(){ s.clear(); let parent = document.getElementById("container"); let child = document.getElementsByTagName("p"); parent.removeChild(child) }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="stack.css"> </head> <body> <!-- <div> <input type="text" id="stackName"> <button onclick="MakeStack()">Make a stack</button> </div> --> <div> <input type="text" id="elemet"> <button onclick="pushToStack(document.getElementById('elemet').value)">Push an elemet</button> <button onclick="popFromStack()">Pop</button> <button onclick="clearStack()">Clear the Stack</button> </div> <div id="container"> </div> <script src="script.js"></script> </body> </html>

what i want is to remove all children . I want to remove all children from id="container" . I tried alto but it is not working somehow . And logic for popFromStac() is not working too but my primary need is clearStack(). popStack() will remove latest element inserted and clearStack() will remove all elements.

Answer 1

To remove all elements inside a DOM node, you have several options:

 function removeChildrenInnerHTML() { console.time('removing child nodes using innerHTML'); node.innerHTML = ''; console.timeEnd('removing child nodes using innerHTML'); } function removeChildrenInLoop() { console.time('removing child nodes using loop'); while (node.firstChild) { node.removeChild(node.firstChild); } console.timeEnd('removing child nodes using loop'); } btn1.addEventListener('click', removeChildrenInnerHTML); btn2.addEventListener('click', removeChildrenInLoop);

 <button id="btn1" type="button">Click to remove all child nodes using innerHTML = ''</button> <button id="btn2" type="button">Click to remove all child nodes using fastest method</button> <ul id="node"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul>

How i can remove last element I entered , all element if i wanted?

Question

1 answers

solution1
1 ACCPTED 2018-09-09 11:29:14

How i can remove last element I entered , all element if i wanted?

Question

1 answers

solution1 1 ACCPTED 2018-09-09 11:29:14

solution1
1 ACCPTED 2018-09-09 11:29:14