event.target.value、appendChild 和 removeChild JS

Question

我想用两个按钮做一个简单的程序，如果我点击“+”按钮我想要一个输入，如果我点击“-”我想要一个输入。 我有两个输入类型按钮（加号为 0，减号为 1）和一个用于新输入的空格（#addSpace）。 如果我点击值 0 没问题，如果我点击 0 什么都没有。 控制台中的问题是：NotFoundError: Node was not found

    HTML
        <div class="d-inline mx-auto" id="addSpace">
            <input name="firstvalue" placeholder="Nome studente">
        </div>

        <div class="d-block pt-5">
            <input type="button" id="aggiungi" value="0"><i class="fas fa-plus"></i>
            <input type="button" id="togli" value="1"><i class="fas fa-less-than"></i>
        </div>

    JS
let add = document.getElementById("aggiungi");
add.addEventListener("click", moreFunction);

let less = document.getElementById("togli");
less.addEventListener("click", moreFunction);
            let space = document.querySelector("#addSpace");

    function moreFunction() {
        let line = document.createElement("input")
        line.classList.add("d-flex");
        line.classList.add("mt-3");

        if (event.target.value == 0) {
            space.appendChild(line);
        }

        if (event.target.value == 1) {
            space.removeChild(line);
        }
    }

Answer 1

这个解决方案怎么样。

您添加的每个新输入都会被赋予一个特殊的类added-input。然后，当您单击“1”按钮时，它只会查找该类的最后输入。

let add = document.getElementById("aggiungi");
add.addEventListener("click", moreFunction);

let less = document.getElementById("togli");
less.addEventListener("click", moreFunction);
let space = document.querySelector("#addSpace");

function moreFunction() {

    if (event.target.value == 0) {
        let line = document.createElement("input")
        line.classList.add("d-flex");
        line.classList.add("mt-3");
        line.classList.add("added-input");
        space.appendChild(line);
    }

    if (event.target.value == 1) {
        const addedInputs = document.querySelectorAll(".added-input");
        if(addedInputs.length){
            addedInputs[addedInputs.length - 1].remove();
        }
    }
}

<div class="d-inline mx-auto" id="addSpace">
    <input name="firstvalue" placeholder="Nome studente">
</div>

<div class="d-block pt-5">
    <input type="button" id="aggiungi" value="0"><i class="fas fa-plus"></i>
    <input type="button" id="togli" value="1"><i class="fas fa-less-than"></i>
</div>