Remove a specific element with JAVASCRIPT from an HTML structure

Question:

Hi, I don't have much experience with js and I have a problem I think is silly but that I've been trying to solve for days and I can't. 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 that excludes numbers

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

With this code it removes the element from the list, but it doesn't remove it from the HTML, only when I select the first element to exclude it excludes all of the HTML.

Answer:

If listaProcessos is the same as listaNumeros , you can do it like this:

I created a renderList() function that recreates the list based on the listaNumeros array and 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 the delete function:

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

You will have a bit of trouble adding number to the sequence, as its function is based on the amount of elements and this amount will change when deleting. What you can do is add to the last element, but I imagine this is just an example.

Result:

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>
Scroll to Top
AllEscort