时间戳

首页 > 解决方案 > 清除多个输入字段的内容？

javascript - 清除多个输入字段的内容？

问题描述

嗨，我正在使用按钮动态添加行，当我输入完信息后，我希望它可以清除内容。“添加口袋妖怪”按钮是我想要按下的按钮，它应该清除所有内容。

function addPokemon() {
    var pokemonName = document.getElementById("pokemon-name-container");
    pokemonName.innerHTML = document.getElementById("pokemon-names").value;

    for (var i = 0; i < element.length; i++) {
        if (element[i].value !== "undefined") {
            pokemonArray.push(element[i].value);
        }
    }
    console.log(pokemonArray);
    for (var i = 0; i < pokemonArray.length; i++) {
        document.getElementById("pokemon-container").innerHTML += "<li>" + pokemonArray[i] + "</li>";
    }
    document.getElementById("pokemon-name-container").value = "";
    document.getElementById("move-name").value = "";
}

这是我正在使用的功能。^^

下面是我的 HTML vv

        <div>
            <table>
                <tbody id="tbody">
                    <tr>
                        <td>
                            <div id="pokemon-name-container">
                                <p>Pok&eacutemon Name:</p>
                                <input type="text" id="pokemon-names" size="30">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p class="moves">Moves:</p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input class="move-container" type="text" id="move-name" placeholder="Enter move here">
                        </td>
                        <td>
                            <input class="button-container" type="button" id="remove-btn" value="Remove Move" onclick="removeRow()">
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

        <div>
            <input type="button" class="add-move-button" id="add-move-button" value="Add Move" onclick="addRow()">
        </div>
        <div>
            <input type="button" class="add-pokemon-button" id="add-pokemon-button" value="Add Pok&eacute;mon" onclick="addPokemon()">
        </div>

标签： javascripthtmlbuttoninput

解决方案

您可以将所有输入放入您创建的唯一类中，该类在具有唯一 ID 的父级下定义它们。然后在 javascript 的函数中使用下一段代码，const childs = document.querySelectorAll('#idParent.classChilds')这个 querySelectorAll 有点像 getElementsById 但使用 CSS 的选择器，所以它更强大。querySelectorAll 会返回一个 NodeList，其中包含与 de DOM 和 CSS 查询匹配的所有元素。

然后你只需要使用函数式编程做类似的事情：

const childs = document.querySelectorAll('#idParent .classChilds')
childs.forEach(child=>{
    child.value = ""
})

我不确定这段代码是否有效（我没有使用代码编辑器和浏览器来检查是否有错误），正如我所说，你可以做类似的事情

希望是有帮助的

仅供参考，尽量避免使用 getElementById 或 getElementsByClass 之类的选择器......尝试使用这个：

document.querySelector('CSS SELECTOR')   // GIVES YOU THE FIRST MATCH OF THE CSS SELECTOR
document.querySelectorAll('CSS SELECTOR') // GIVES YOU A NODELIST WITH ALL MATCHES

推荐阅读