Removing DOM elements with removeChild ()

Navigation
1

I'm starting with javascript, from scratch, I have this exercise where the goal is to add and remove city names in a list in html. I know little of DOM. The insert part already works, but the removal part is not working. Can anyone 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>
    
asked by anonymous 03.01.2018 / 02:12

2 answers

0

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

var content = document.createTextNode(txt); is also not serving the function at all.

See how it looks in the loop and capturing text: 

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 it 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 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 the elements of a collection, similar to document.getElementsByTagName .

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

These methods are more flexible because they accept full CSS selectors. Example: document.querySelectorAll("#city li");

    
03.01.2018 / 02:31
0

It turns out that you are trying to access the value attribute of a list ( li ) and that attribute does not exist.

Instead of using value , use 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>
    
03.01.2018 / 02:31
How to make input mandatory in only a few cases Send Array to DB