Deleting content with Jquery

Question

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

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

});

The code above isn’t working. I want to double-click the item itself to be removed, and, as an optimization, I want to put a code so that only the items in that list are removed.

<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>

Answer 1

Your code has an error. You should not use $('<li>'), and yes $('li').

When you use $('<li>'), you are telling jQuery to create a new tag of the type li.

In your case, if you want to work only on the items li inside #listagem-simples, do so:

$(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>

When you use $('#listagem-simples'), you are selecting the element with this id. By making a find('li') then you are looking for all the li within this element. Therefore, only the elements inside will receive this function from jQuery.

Another way to do it would be by using a selector similar to Css3:

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

 // ou ainda

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

In the case of the selector #lista-simples > li only the function of dblclick if the element li be an immeasurable son of #lista-simples. In the second example, the #lista-simples li, whichever li who is inside #lista-simples will be affected by dblclick.

Example:

$(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>

Updating

If you’re having problems with li dynamically added within #listagem-simples, my suggestion is you use the on.

Behold:

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

Learn more about assigning events to dynamic elements here:

How to link events to dynamically created elements and pass parameters?