移除附加元素

Question

当我在第一个框中输入内容并单击下一步时，我输入的单词会插入到我的页面中。 但是，如果我单击“上一步”，然后再次单击“下一步”，则会再次打印。

如果单击“返回”，我希望在单击“下一步”后附加的关键字被删除，这样如果再次单击“下一步”，它只会打印一次（如果我进行了任何编辑，则会更新）。

 document.addEventListener("DOMContentLoaded", function() { var stepOne = document.getElementsByClassName("step-1"); var stepTwo = document.getElementsByClassName("step-2"); var nextButton = document.getElementsByClassName("next"); var backButton = document.getElementsByClassName("back"); nextButton[0].onclick = function() { stepOne[0].style.display = "none"; stepTwo[0].style.display = "block"; var inputKeyword = document.getElementById("inputJobTitle").value; var newKeyword = document.createElement("p"); newKeyword.setAttribute("id", "retrievedField-1"); newKeyword.setAttribute("class", "retrievedFieldName"); newKeyword.innerText = inputKeyword; newKeyword.setAttribute("id", "retrievedField-1"); newKeyword.setAttribute("class", "retrievedFieldName"); document.getElementById("retrievedFields").appendChild(newKeyword); } backButton[0].onclick = function() { stepOne[0].style.display = "block"; stepTwo[0].style.display = "none"; } })

 .step-1 { display: block; }.step-2 { display: none; }

 <!--STEP 1--> <div class="main step-1"> <div class="tab" id="tab-1"> <div class="inputFields"> <p id="jobtitle" class="inputFieldName">Job title</p> <input type="search" id="inputJobTitle" class="inputBar" /> <p class="and">AND</p> </div> <div class="button"> <button class="next">Next ></button> </div> </div> </div> <!--STEP 2--> <div class="main step-2"> <div class="tab" id="tab-1"> <div class="inputFields"> <div id="retrievedFields"></div> <input type="search" class="inputBarAlternative" /> <div class="add"> <button class="addButton">+ Add Keyword</button> <p id="addKeyword"> Add a skill or keyword that must be in your search results </p> </div> </div> <div class="buttons"> <button class="back">Back</button> <button class="next">Next</button> </div> </div> </div> </body>

Answer 1

每次单击下一步按钮都会触发 append。 因此，您只需在单击背面时执行与 append 相反的操作。 只需在您的 onclick 中添加此行：

document.getElementById("retrievedFields").removeChild(document.getElementById("retrievedFields").lastElementChild);

Answer 2

您还可以在创建元素之前检查元素是否存在..

nextButton[0].onclick = function() {
    stepOne[0].style.display = "none";
    stepTwo[0].style.display = "block";
    var inputKeyword = document.getElementById("inputJobTitle").value;
    var newKeyword = document.getElementById("retrievedField-1")
    if (!newKeyword) {
    newKeyword = document.createElement("p");
    newKeyword.setAttribute("id", "retrievedField-1");
    newKeyword.setAttribute("class", "retrievedFieldName");
    document.getElementById("retrievedFields").appendChild(newKeyword);
    }
    newKeyword.innerText = inputKeyword;
     

  }