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?