如何删除最后（动态）创建的元素？

Question

So, I have 2 functions,

1st one creates 10 elements:

    function addDay() {
           // For loop to create 10 div elements. 
           for (k = 1; k < 11; k++) {     
           let div = document.createElement("div");
           div.setAttribute("class", "studentGrades")
           div.className += " sgID" + k
           div.setAttribute("onclick", "userInput(this, Number(prompt('Please, enter 
    number here')))");
           div.innerHTML = "0"
           document.querySelector("#container3").appendChild(div)
           }}

2nd one is used to delete previously genereated elements (div):

 function removeDay() {
 // Looping through all 10 div elements to delete them.
 for (let j = 0; j < 10; j++) {
    let removeDay = document.querySelector('.studentGrades');
    removeDay.parentNode.removeChild(removeDay);
}}

These functions represent buttons (Add Day) and (Remove Day)

And here is the problem, Button can be clicked (10times for example) which will create 10 columns, each containing 10 div element, I want my removeDay function to delete the last column, Right now it does exactly the opposite it deletes The column which was created first.

Answer 1

The problem is that this line is returning the first element:

let removeDay = document.querySelector('.studentGrades');

You could get the last element with:

let removeDay = document.querySelector('.studentGrades:last-child');

However, there's no need to call document.querySelector so many times. Instead, you can directly access the last element of the container with Node.lastChild :

 const container = document.getElementById('container'); const add = document.getElementById('add'); const remove = document.getElementById('remove'); let index = -1; add.onclick = () => { // Add 10 new elements at the end: const newLastIndex = index + 10; while (index < newLastIndex) { let div = document.createElement('div'); div.className = 'studentGrades'; div.innerHTML = ++index; container.appendChild(div); } remove.disabled = false; }; remove.onclick = () => { // Remove last 10 elements: for (let i = 0; i < 10; ++i) { container.removeChild(container.lastChild); // This will not work in IE: // container.lastChild.remove(); } index -= 10; if (index === -1) { remove.disabled = true; } }; 

 body, button { font-family: monospace; } #container { position: relative; border: 3px solid black; border-right: none; margin-bottom: 10px; } #container:empty { border-top: none; } .studentGrades { position: relative; border-right: 3px solid black; width: 10%; box-sizing: border-box; display: inline-block; text-align: right; padding: 5px; } 

 <div id="container"></div> <button id="add">ADD</button> <button id="remove" disabled>REMOVE</button> 

If you don't need to support IE, instead of using Node.removeChild() :

container.removeChild(container.lastChild);

You could use ChildNode.remove() and do:

container.lastChild.remove();

Answer 2

document.querySelector() only finds the first match .

Instead try using: document.querySelector('.studentGrades:last-child') .

Answer 3

Maybe like this:

  function addDay() { for (k = 1; k < 11; k++) { let div = document.createElement("div"); div.setAttribute("class", "studentGrades"); div.className += " sgID" + k; div.setAttribute("onclick", "userInput(this, Number(prompt('Please, enter number here')))"); div.innerHTML = "0"; document.querySelector("#container3").appendChild(div) } } function removeDay() { for (let j = 0; j < 10; j++){ if(document.querySelectorAll(".studentGrades:last-child").length){ document.querySelectorAll(".studentGrades:last-child")[0].remove(); } } } 

 <div id="container3"></div> <input type="button" value="add" onclick="addDay();"> <input type="button" value="remove" onclick="removeDay();"> 

Answer 4

You could create a Stack, like this:

function Stack() {
    let items = [];
    let maxIndex = -1;

    this.isEmpty = () => {
        return maxIndex === -1;
    };

    this.push = (item) => {
        (items.length > ++maxIndex) ? (items[maxIndex] = item) : items.push(item);
    };

    this.pop = () => {
        return (maxIndex >= 0) ? items[maxIndex--] : undefined;
    };

    this.top = () => {
        return (maxIndex >= 0) ? items[maxIndex] : undefined;
    }
}

and then push items whenever you add a div :

function addDay(S) {
       // For loop to create 10 div elements. 
       for (k = 1; k < 11; k++) {     
       let div = document.createElement("div");
       div.setAttribute("class", "studentGrades")
       div.className += " sgID" + k
       div.setAttribute("onclick", "userInput(this, Number(prompt('Please, enter 
number here')))");
       div.innerHTML = "0";
       document.querySelector("#container3").appendChild(div);
       S.push(div);
       }}

and pop whenever you remove an item, here we are just removing all elements from the stack:

function removeDay(S) {
 var itemToRemove;
 while (itemToRemove = S.pop()) itemToRemove.remove();
}}

Naturally, somewhere you will need to create the stack somehow, like:

let S = new Stack();