Steps 3 and 4, removing the added items


#1


https://www.codecademy.com/courses/jquery-ext/projects/jquery-prj_listeasy


I can toggle the star and remove the preadded items, but when I add test items, I can toggle the star or remove them. I have looked at the other topics and tried various codes. The below code is the best I have to date. but still will not remove new items or toggle their star.

Thanks


var template = function(text) {
  return '<p><input type="checkbox"><i class="glyphicon glyphicon-star"></i><span>' + text + '</span><i class="glyphicon glyphicon-remove"></i></p>';
};

var main = function() {
  $('form').submit(function() {
  var text = $('#todo').val();    
  var html = template(text);
    $('.list').append(html);
    $('#todo').val("");
    
    return false;  
  });
  $('.glyphicon-star').on('click', function() {
   $(this).toggleClass('active'); 
  });
  $('.glyphicon-remove').on('click', function() {
   $(this).parent().remove(); 
  });
};

$(document).ready(main);


#2

When using on() specify the parent element in the selector, and write the delegated element in the argument list. Since we selecting the same parent, we can chain the two listeners...

  $('.list').on('click','.glyphicon-star', function(){
    $(this).toggleClass('active');
  }).on('click','.glyphicon-remove',function(){
    $(this).parent().remove();
  });

This will maintain the bindings on .list when items are removed.


#3

Thank you very much!! I thought I had tried that, but I must have either mistyped or left something out when I did. I appreciate the fast help!


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.