event.target.value、appendChild 和 removeChild JS

Question

我想用两个按钮做一个简单的程序，如果我点击“+”按钮我想要多一个输入，如果我点击“-”我想要一个输入。我有两个输入类型按钮（值 0 表示加号，1 表示减号），以及一个 space (#addSpace) 用于新输入。如果我点击值 0 就可以，如果我点击 0 则什么都没有。控制台中的问题是：NotFoundError: 找不到节点

    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

这个解决方案怎么样。

您添加的每个新输入都会得到一个特殊的 class added-input。然后，当您单击“1”按钮时，它只会查找带有 class 的最后输入。

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>

event.target.value、appendChild 和 removeChild JS

event.target.value, appendChild and removeChild JS

javascript

input

addeventlistener

appendchild

removechild