Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Remove and added class with jQuery

HI,

So If you go here

And you add a player, if thats a circle of a square, and then i want to selected the added player, and then when I selected it, i shoudl be able to press the button Remove Player and it shoudl be removed. How do i do it? I have no idea how i can select somehting that iv added with jQuery, like (this) sicne its the specific one clicked.

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Also, how can i add the same element without adding the other one first ? it seem that i need to add this, and then this, and thsi, and then this, and this, but i just can press add to add the same in a row.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Hey Konrad, on an unrelated note, as both a Mod and frequent poster I'm sure you'd like to set a good example as a forum user.

I think you've left many questions unresolved. You might want to review them (select both "My Posts" and "All Topics" in the forum drop-downs) and choose "best answers" for any not having a green check-mark.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Once you add something to the DOM, it can be manipulated with JQuery just like any other DOM element. Just call .remove() (not .removeClass()) on an element you'd like to remove.

But you have other issues here, including:

  • your click handler for the removePlayer button doesn't remove the element, only the selected class
  • the selector is based on this, which refers to the removePlayer button itself, not the player
  • only the original player is a sibling of the removePlayer button (child of the div with no id)
  • the added "players" are children of the body (so not siblings of the original player)
  • you add the selected class to the button itself, not a player
  • as you create elements, you clone ones that have id's without assigning new ones (violating the unique id rule)
  • the newly added elements never get the selected class (they have no click handlers - consider using on() here)

I heartily recommend that you get familiar with the browser DevTools, and particularly the "Elements" tab. You will find it to be a tremendous help in working out issues like this.

To get you started, here's a little example of both added element removal and a delegate click handler. Notice how the click handler works even on elements that are created later.

code.html 
<body>
  <button id="test">Add a paragraph</button>
</body>
script.js 
// NOTE: JQuery required
// remove any paragraph that is clicked
$('body').on('click', 'p', function() {
  $(this).remove();
});

// create a new paragraph when button clicked
$('#test').click(function() {
  $('body').append($('<p>Here is a paragraph.</p>'));
});