Se listaProcessos
for o mesmo que listaNumeros
, você pode fazer assim:
Criei uma função renderList()
que recria a lista baseada no array listaNumeros
e em seus valores.
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);
}
Basta adicioná-la a função de excluir:
function excluiNumero(indice) {
listaNumeros.splice(indice, 1);
renderList();
}
Você vai ter um pouco de problemas ao adicionar número na sequência, já que sua função se baseia na quantidade de elementos e essa quantidade será mudada ao excluir. O que você pode fazer é somar ao último elemento, mas imagino que isso seja apenas um exemplo.
Resultado:
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>
listaProcessos
?.splice()
.