Remove a specific element with JAVASCRIPT from an HTML structure

Question

Hello I do not have much experience with js and I am with a problem believe that silly but that there are days trying to solve and I can not. I created a list of HTML elements with the following structure:

HTML

<ul id="NumerosAdicionados" class="fa-ul">
     <h6><strong>Numero(s) inserido(s)</strong></h6>
</ul>

Function that adds numbers

var listaNumeros = [];
function adicionaNumeros() {
    var i = listaNumeros.length;
    listaNumeros.push(i);
    $("#NumerosAdicionados").append("<li id=" + i + "   value=" + i + "><i class='fa fa-times-circle' onclick=excluiNumero(" + i + ")></i>" + i + "</li>");

}

Function excluding the numbers

function excluiNumero(indice) {
    listaProcessos.splice(indice, 1);
}

With this code it removes the element from the list, but does not remove it from the HTML, only when selecting the first element to delete it deletes all of the HTML.

Answer 1

If listaProcessos is the same as listaNumeros, you can do so:

I created a function renderList() that recreates the array-based list listaNumeros and in its values.

function renderList(){
    // Deixa dentro da ul só que tinha antes
    $("#NumerosAdicionados").html('<h3><strong>Numero(s) inserido(s)</strong></h3>');
    var html = ""; // var que receberá o html completo das li
    listaNumeros.forEach(function(el, i){
        // a cada item do array adicionar um novo li
        html += "<li id=" + el + "   value=" + el + "><i class='fa fa-times-circle' onclick=excluiNumero(" + el + ")></i>" + el + "</li>";
    }) 
    // faz apenas um append (melhor para o desempenho)
    $("#NumerosAdicionados").append(html);
}

Just add it to delete function:

function excluiNumero(indice) {
    listaNumeros.splice(indice, 1);
    renderList();
}

You will have some problems adding number in the sequence, since its function is based on the amount of elements and this amount will be changed when deleting. What you can do is add to the last element, but I imagine this is just an example.

Upshot:

var listaNumeros = [];
function adicionaNumeros() {
    var i = listaNumeros.length == 0 ? listaNumeros.length : +listaNumeros[listaNumeros.length-1]+1;
    listaNumeros.push(i);
    $("#NumerosAdicionados").append("<li id=" + i + "   value=" + i + "><i class='fa fa-times-circle' onclick=excluiNumero(" + i + ")></i>" + i + "</li>");
}
$('.inserir').click(adicionaNumeros)

function excluiNumero(indice) {
    listaNumeros.splice(indice, 1);
  	renderList();
}
function renderList(){
	$("#NumerosAdicionados").html('<h3><strong>Numero(s) inserido(s)</strong></h3>');
	var html = "";
	listaNumeros.forEach(function(el, i){
		html += "<li id=" + el + "   value=" + el + "><i class='fa fa-times-circle' onclick=excluiNumero(" + el + ")></i>" + el + "</li>";
	}) 
  $("#NumerosAdicionados").append(html);
}
$('.excluir').click(function(){
	excluiNumero(1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="NumerosAdicionados" class="fa-ul">
     <h3><strong>Numero(s) inserido(s)</strong></h3>
</ul>

<button class="inserir">Inserir</button>

<button class="excluir">Excluir o 2°</button>