jQuery - Delete items in a list

Question

I want to add different items to a list and then delete each one of them using a 'click' event. However, the bellow snippet only allows me to delete those preset items but not those I have added. Could anyone tell me what I'm doing wrong ?

HTML

<body>
<div id="page">
  <h1 id="header">List</h1>
  <h2>Buy groceries</h2>
  <ul>
    <li id="one" class="hot"><em>fresh</em> figs</li>
    <li id="two" class="hot">pine nuts</li>
    <li id="three" class="hot">honey</li>
    <li id="four">balsamic vinegar</li>
  </ul>
  <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
  <form id="newItemForm">
    <input type="text" id="itemDescription" placeholder="Add description..." />
    <input type="submit" id="addButton" value="add" />
  </form>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/form.js"></script>

jQuery

$(function() {
  var $newItemButton = $('#newItemButton');
  var $newItemForm = $('#newItemForm');
  var $textInput = $('input:text');

  $newItemButton.show();
  $newItemForm.hide();

  $('#showForm').on('click', function(){
    $newItemButton.hide();
    $newItemForm.show();
  });

  $newItemForm.on('submit', function(e){
    e.preventDefault();
    var newText = $textInput.val();
    $('li:last').after('<li>' + newText + '</li>');
    $('li:last').attr('class','hot');
    $newItemForm.hide();
    $newItemButton.show();
    $textInput.val('');
  });
  var $listItems = $('li');
  $listItems.on('click', function(){
  $(this).animate({
      opacity: 0.0,
      paddingLeft: 50
    }, 500, function(){
      $(this).remove();
    });
  });
});

https://learn.jquery.com/events/event-delegation/ – kosmos Apr 25 '17 at 06:36 — kosmos, Apr 25 '17 at 06:36

score 1 · Accepted Answer · answered Apr 25 '17 at 06:40

Please check below snippet

  $(function() {
  var $newItemButton = $('#newItemButton');
  var $newItemForm = $('#newItemForm');
  var $textInput = $('input:text');

  $newItemButton.show();
  $newItemForm.hide();

  $('#showForm').on('click', function(){
    $newItemButton.hide();
    $newItemForm.show();
  });

  $newItemForm.on('submit', function(e){
    e.preventDefault();
    var newText = $textInput.val();
    $('li:last').after('<li>' + newText + '</li>');
    $('li:last').attr('class','hot');
    $newItemForm.hide();
    $newItemButton.show();
    $textInput.val('');
  });

  
});

$(document).ready(function(){

$("#page").on("click","li",function(){
    $(this).animate({
        opacity: 0.0,
        paddingLeft: 50
      }, 500, function(){
        $(this).remove();
      });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="page">
  <h1 id="header">List</h1>
  <h2>Buy groceries</h2>
  <ul>
    <li id="one" class="hot"><em>fresh</em> figs</li>
    <li id="two" class="hot">pine nuts</li>
    <li id="three" class="hot">honey</li>
    <li id="four">balsamic vinegar</li>
  </ul>
  <div id="newItemButton"><button href="#" id="showForm">new item</button></div>
  <form id="newItemForm">
    <input type="text" id="itemDescription" placeholder="Add description..." />
    <input type="submit" id="addButton" value="add" />
  </form>
</div>

@LouisAn - Check above answer .. it is working .. check Code snippet .. you need to register click event inside .ready event as above . — prog1011, Apr 25 '17 at 06:41

score 0 · Answer 2 · answered Apr 25 '17 at 06:38

Because you are not binding click event to new elements, use class to bind and bind these on parent, say top parent document

$(document).on('click', '.class', function(){ $(this).animate({ opacity: 0.0, paddingLeft: 50 }, 500, function(){ $(this).remove(); }); });

jQuery - Delete items in a list

2 Answers2