移除附加元素

Question

When I type something in the first box, and click Next, the word I typed is inserted on my page. However, if I click Back and then click Next again, it is printed a second time.

I want the keyword appended after I've clicked Next to be deleted if I click Back so that if I click Next again it is printed only once (and updated if I have made any edit).

 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

Each new click on the next button will trigger an append. So you just have to do the opposite of an append on the click on back. Just add this line in your onclick:

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

Answer 2

You could also check to see if the element exists before you create it..

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;
     

  }