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>

我要删除所有孩子。我想从id =“ container”中删除所有子级。我尝试了女低音，但是它不起作用。而且popFromStac（）的逻辑也不起作用，但是我的主要需求是clearStack（）。 popStack（）将删除最新插入的元素，而clearStack（）将删除所有插入的元素。

Answer 1

要删除DOM节点内的所有元素，您有几个选择：

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>

我如何删除我输入的最后一个元素，如果需要，可以删除所有元素？

1 个答案: