javascript - 如果存在javascript，如何添加输入并删除它

Question

我有一个表单，我想在其中添加新输入，如果此输入存在，请将其删除或阻止添加。在我的代码中只添加了一个输入，当我尝试添加另一个不同的输入时，第一个输入被清除正文:

<input type="text" id="member" name="member" value="">name<br />
            <a href="#" id="filldetails" onclick="addFields()">add</a>
            <div id="container"/>

页脚:

<script type='text/javascript'>
    function addFields(){

        var name = document.getElementById("member").value;

        var container = document.getElementById("container");

        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i=0;i<1;i++){

            container.appendChild(document.createTextNode(name+ (i+1)));

            var input = document.createElement("input");
            input.type = "text";
            input.name = name;
            container.appendChild(input);
            // Append a line break
            container.appendChild(document.createElement("br"));
            container.appendChild(document.createElement("br"));
        }
    }
</script>

Answer 1

您可以使用querySelector('#member') 来检查输入是否存在。

function addFields() {
  var container = document.getElementById("container");
  if (!container.querySelector('#member')) {
    container.innerHTML = `<input type="text" id="member" name="member" value="">name`;
    console.log('input added');
  }
}

<a href="#" id="filldetails" onclick="addFields()">add</a>
<div id="container">

</div>