3

Olá eu não tenho muita experiência com js e estou com um problema acredito que bobo mas que há dias tento resolver e não consigo. Eu criei uma lista de elementos HTML com a seguinte estrutura:

HTML

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

Função que adiciona os números

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>");

}

Função que exclui os números

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

Com esse código ele remove o elemento da lista, mas não remove do HTML, apenas quando seleciono o primeiro elemento para excluir ele exclui todos do HTML.

6
  • 1
    O que é listaProcessos? Commented 15/08/2016 às 12:49
  • 3
    Possível duplicata de Remover mais de um item de um array
    – Randrade
    Commented 15/08/2016 às 13:03
  • @Randrade, o problema apresentado pela AP está relacionado a modificação dinâmica no HTML, e ela já consegue excluir o item array. Acho que essa questão, apesar de ser bem parecida, não menciona isso, mas posso estar errado. Commented 15/08/2016 às 13:10
  • @SamirBraga Se a dúvida do AP for essa mesmo, você tem razão. Eu havia entendido que era algo em relação ao .splice().
    – Randrade
    Commented 15/08/2016 às 13:37
  • A minha dúvida não era com relação ao splice não, era como exibir mesmo o html depois do item exluído. Commented 15/08/2016 às 13:50

1 Resposta 1

1

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>

1
  • Muito obrigada, Samir Braga!!! Era exatamente isso que eu precisava mas não sabia como fazer. Commented 15/08/2016 às 13:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .