Removal of elements in the DOM with removeChild()

Question

I’m starting with javascript, from scratch, I have this exercise where the goal is to add and remove city names in an html list. I know little about DOM. The insertion part already works, but the removal part is not working. Someone can help me?

<h1>Lista de cidades visitadas.</h1>
<ul id="city"></ul>
<p>Adicionar ou remover uma cidade da lista de cidades a serem visitadas.</p>
<input type="text" name="txt-city" id="txt-city">
<button onclick="addCity()">Adicionar Cidade</button>
<button onclick="removeCity()">Remover cidade</button>
<script>
    function addCity() {
        var nameCity = document.getElementById("txt-city").value;
        var newList = document.createElement("li");
        var contentText = document.createTextNode(nameCity);
        newList.appendChild(contentText);
        document.getElementById("city").appendChild(newList);
    }

    function removeCity() {
        var list = document.getElementById("city");
        var el = list.getElementsByTagName("li");
        var txt = document.getElementById("txt-city").value;
        var content = document.createTextNode(txt);
        var x;
        for(x = 0; x < el.length; x++) {
            if(content == el[x].value) {
                list.removeChild(list.childNodes[x]);
            }
        }
    }
</script>

Answer 1

Turns out you’re trying to access the attribute value from a list (li) and that attribute does not exist.

Instead of using value, utilize innerHTML

function addCity() {
  var nameCity = document.getElementById("txt-city").value;
  var newList = document.createElement("li");
  var contentText = document.createTextNode(nameCity);
  newList.appendChild(contentText);
  document.getElementById("city").appendChild(newList);
}

function removeCity() {
  var list = document.getElementById("city");
  var el = list.getElementsByTagName("li");
  var city = document.getElementById("txt-city").value;
  
  for (let x = 0; x < el.length; x++) {
    if (city == el[0].innerHTML) {
      list.removeChild(list.childNodes[x]);
    }
  }
}

<h1>Lista de cidades visitadas.</h1>
<ul id="city"></ul>
<p>Adicionar ou remover uma cidade da lista de cidades a serem visitadas.</p>
<input type="text" name="txt-city" id="txt-city" value="Salvador">
<button onclick="addCity()">Adicionar Cidade</button>
<button onclick="removeCity()">Remover cidade</button>

Answer 2

Take the text of the elements with innerText and remove them with outerHTML (alternative to removeChild). Your removal function is wrong: el[x].value does not exist in the context.

var content = document.createTextNode(txt); also not serving for nothing in the function.

See how it looks right in the loop and in the text capture:

function removeCity() {
  var list = document.getElementById("city");
  var el = list.getElementsByTagName("li");
  var txt = document.getElementById("txt-city").value;
  for (var x = 0; x < el.length; x++) {
    if (txt == el[x].innerText) { // comparo o texto no campo com texto nas <li>
      el[x].outerHTML = ''; // removo o elemento do DOM
    }
  }
}

See working:

function addCity() {
  var nameCity = document.getElementById("txt-city").value;
  var newList = document.createElement("li");
  var contentText = document.createTextNode(nameCity);
  newList.appendChild(contentText);
  document.getElementById("city").appendChild(newList);
}

function removeCity() {
  var list = document.getElementById("city");
  var el = list.getElementsByTagName("li");
  var txt = document.getElementById("txt-city").value;
  for (var x = 0; x < el.length; x++) {
    if (txt == el[x].innerText) {
      el[x].outerHTML = '';
    }
  }
}

<h1>Lista de cidades visitadas.</h1>
<ul id="city"></ul>
<p>Adicionar ou remover uma cidade da lista de cidades a serem visitadas.</p>
<input type="text" name="txt-city" id="txt-city">
<button onclick="addCity()">Adicionar Cidade</button>
<button onclick="removeCity()">Remover cidade</button>

Using querySelector

You can also use the querySelectorAll and querySelector in the removal function:

function removeCity() {
  var el = document.querySelectorAll("#city li");
  var txt = document.querySelector("#txt-city").value;
  for (var x = 0; x < el.length; x++) {
    if (txt == el[x].innerText) {
      el[x].outerHTML = '';
    }
  }
}

querySelectorAll selects all elements of a collection, similar to document.getElementsByTagName.

querySelector selects a single element, similar to document.getElementById.

These methods have greater flexibility because they accept full CSS selectors. Example: document.querySelectorAll("#city li");