Remove appended element

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>

First of all, if you add more than one item to the list, you will have multiple elements with the same id, which is invalid HTML, and it will make your life more difficult. But since you have an id on your element, removing it is simple. — Heretic Monkey, May 02 '21 at 18:50
You will soon have other issues I think. Because this line has the id value static all your elements added will have the same id, and id's are supposed to be unique: `newKeyword.setAttribute("id", "retrievedField-1");` — Laurent S., May 02 '21 at 18:50
Does this answer your question? [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) — Heretic Monkey, May 02 '21 at 18:50

score 1 · Accepted Answer · answered May 02 '21 at 18:56

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);

answered May 02 '21 at 18:56

Laurent S.

6,816
2
28
40

Worked perfectly, thank you! I had been trying with removeChild before but it wasn't giving the expected result. I think it's because the omitted lastElementChild at the end. – Laura Kebab May 03 '21 at 16:10

score 0 · Answer 2 · answered May 02 '21 at 19:03

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;
     

  }

Remove appended element

2 Answers2