ListEasy - Having trouble toggling/removing stuff


#1

@zystvan I think @webwhiz47102 is asking how to remove the glyphicon-star from the dynamically added todo items, i.e. step 3 in the exercise. I am having trouble with that as well. I have the below which is not working. Just started jQuery this weekend.

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

ListEasy
#2

@andrewc4 You're essentially saying to the computer "when there's an event on this element, make sure it's a click on this element and run this code". It should be "when there's an event on the page, make sure it's a click on this element and run this code". So,

$(document).on('click', '.glyphicon-star', function() {
  // ...
});

#3

<facepalm>, of course. Much thanks @zystvan. I also believe I have done the last part correctly, but I think what might be more practical would be to remove the entire <p>. I have the below

  $(document).on( 
    	"click", ".glyphicon-remove", function (click) {
   		 $(this).remove();
  });

But all this does is remove the glyphicon. If I swap out this with with <p> then it will remove all of the '<p>'s. Is there a way to designate that specific one without adding an id? Swapping out glyphicon-remove with p gives a closer intended effect, but the action area is no longer just the glyphicon-remove

Thanks again


#4

@ardrewc4 I've split this into a new topic so we aren't cluttering up the other one :)
Would you mind giving a link to the project?


#5

No problem, good of you to keep the threads organized @zystvan. I dont have the project deployed just yet (localhost for now), but the aim of the question is the same. Is there some way to specify that I want to .remove() the <p> which contains the this vs only removing the glyphicon


#6

Actually, nevermind. All it took was one more Stack Overflow search to find exactly what I was looking for. Instead of this:

  $(document).on( 
    	"click", ".glyphicon-remove", function (click) {
   		 $(this).remove();
  });

I did this

  $(document).on( 
    	"click", ".glyphicon-remove", function (click) {
   		 $(this).closest('tr').remove();
  });

Which did the trick


#8

Hey guys,

Why does

$(document).on('click', '.glyphicon-star', function() {
  // ...
});

work, where as

$('.glyphicon-star').on('click', function() {
  // ...
});

Does not.

I understand they are different from @zystvan explanation "when there's an event on this element, make sure it's a click on this element and run this code". It should be "when there's an event on the page, make sure it's a click on this element and run this code"

But I don't see a reason why the first one shouldn't work


#9

@samangh

You said the first section of code worked, then that it didn't? I'm not sure I'm understanding your question :confused:


#10

@zystvan sorry my bad!

The first one DOES work and the second one DOES NOT work. So my last line should read "I don't see a reason why the second one shouldn't work"


#11

Oh, OK. I see :slight_smile:

I haven't gotten to this project yet, so I'm only guessing that the .glyphicon-star elements are added by JavaScript code?
If that's so, then that's why the second one won't work; Your code runs, and says (in English):

Find all .glyphicon-star elements and listen for clicks on them. When they're clicked, do this: [code]

But since the .glyphicon-star elements are being added later, when the code runs that ↑, there are no :star:s for it to listen for clicks on, so nothing happens when you click one.

The second code runs and says:

Listen for clicks anywhere on the page. When there's a click, check that it's on a :star:, and if so, run this: [code]

Since it listens for clicks anywhere on the page and then makes sure it's on the right element, it will work no matter when you add the :star: :slight_smile:

Does this help you?


#12

Yeah that totally makes sense. Nice one!


#14