3
$('<li>').dblclick(function(){

    var selfItem = $(this);
    selfItem.remove();

});

O código a cima não está funcionando. Quero que, ao clicar duas vezes, o próprio item seja removido, e, como uma otimização, queria colocar um código para que apenas os items dessa lista sejam removidos.

<div class="main">
    <input type="text" name="novo-item" id="nome-novo-item">
    <button id="lista-item">Cadastrar</button>
    <ul id="listagem-simples">
        <li>Avil</li>
        <li>Abocure</li>
        <li>Sodral</li>
        <li>Ulgran</li>
    </ul>
</div>

1 Resposta 1

3

Seu código tem um erro. Você não deve usar $('<li>'), e sim $('li').

Quando você usa $('<li>'), você está dizendo para o jQuery criar uma nova tag do tipo li.

No seu caso, se você quer trabalhar apenas nos itens li dentro de #listagem-simples, faça assim:

$(function() {
    $('#listagem-simples').find('li').dblclick(function() {
        $(this).remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <input type="text" name="novo-item" id="nome-novo-item">
    <button id="lista-item">Cadastrar</button>
    <ul id="listagem-simples">
        <li>Avil</li>
        <li>Abocure</li>
        <li>Sodral</li>
        <li>Ulgran</li>
    </ul>
</div>

Quando você utiliza $('#listagem-simples'), você está selecionando o elemento com esse id. Ao fazer um find('li') em seguida, você está procurando todas as li dentro desse elemento. Assim sendo, apenas os elementos ali dentro receberão essa função do jQuery.

Outra forma de fazer seria usando um seletor similar ao do Css3:

 $('#lista-simples > li').dblclick(function () {
     $(this).remove();
 });

 // ou ainda

 $('#lista-simples li').dblclick(function () {
     $(this).remove();
 });

No caso do seletor #lista-simples > li só será executada a função de dblclick caso o elemento li seja um filho imediado de #lista-simples. Já no segundo exemplo, o #lista-simples li, qualquer li que estiver dentro de #lista-simples vai ser afetada por dblclick.

Exemplo:

$(function() {
    $('#pega-tudo li').dblclick(function() {
        $(this).remove();
    });

    $('#pega-filhos-imediatos > li').dblclick(function() {
        $(this).remove();
    });

});
li { cursor:pointer};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="pega-tudo">
  <h3>todos</h3>
  <li>um</li>
  <li>dois</li>
  <ul>
      <li>um</li>
      <li>dois</li>
  </ul>
</ul>

<ul id="pega-filhos-imediatos">
  <h3>imediatos</h3>
  <li>um</li>
  <li>dois</li>
  <ul>
      <li>um</li>
      <li>dois</li>
  </ul>
</ul>

Atualização

Se você está tendo problemas com li adicionadas dinamicamente dentro de #listagem-simples, a minha sugestão é você utilizar o on.

Veja:

  $('#listagem-simples').on('dblclick', 'li', function () {
      $(this).remove();
  });

Aprenda mais sobre a atribuição de eventos a elementos dinâmicos aqui:

Como atrelar eventos a elementos dinamicamente criados e passar parâmetros?

8
  • entendi, eu estranhei pq no processo de criação, ele funcionou com isso mesmo, mas obrigado por já explicar isso também :D Commented 30/08/2016 às 18:03
  • 2
    Podes usar $('#listagem-simples li') em vêz de $('#listagem-simples').find('li'). +1
    – Sergio
    Commented 30/08/2016 às 18:07
  • 1
    @Sergio adicionei isso à resposta. É que eu tenho mania de ir editando gradativamente... Commented 30/08/2016 às 18:08
  • 1
    @MuriloGambôa não falaste sobre isso na pergunta... que ias adicionar elementos dinamicamente... Testa assim: jsfiddle.net/vxfyz891
    – Sergio
    Commented 30/08/2016 às 18:09
  • 1
    @MuriloGambôa é que isso tem que estar na pergunta. Se você não especificar bem o que precisa, as respostas não irão realmente sair como você esperava. Você pode usar o exemplo do Sérgio, que vai funcionar. Commented 30/08/2016 às 18:12

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 .