Remove a specific element with JAVASCRIPT from an HTML structure

Question

Remove a specific element with JAVASCRIPT from an HTML structure

Navigation

#1 by (1 votes)

3

Hello, I do not have much experience with js and I have a problem, I think it's silly, but I've tried to solve it for days and I can not. I've 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 the 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 does not remove it from HTML, only when I select the first element to delete it deletes all from HTML.

javascript html

asked by anonymous 15.08.2016 / 14:29

1 answer

How to upload and download the same request using AngularJS and Web api? Is it a bad practice to leave an entire Cache Model in IIS?

score 1 · Accepted Answer

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

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

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

You'll have a bit of trouble adding a number to the sequence, since its function is based on the number of elements and that amount will be changed when deleting. What you can do is add up 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><ulid="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>