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.

is this what you want to do? https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript — Chris Li, Sep 09 '18 at 11:24

score 1 · Accepted Answer · answered Sep 09 '18 at 11:29

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>

To remove only the last item entered: `node.removeChild(node.lastChild);`. — connexo, Sep 09 '18 at 12:02

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

1 Answers1