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

It doesn't work after a small change

From the class, we have: $("button").click(function () { $(this).prev().show(); $(this).remove(); });

I understand this as it makes sense and it works. However, if we just switch the order like this:

$("button").click(function () { $(this).remove(); $(this).prev().show(); });

Then it doesn't work.

Could someone help me with this?

Hello,

As far as I know, it is because JavaScript is calling $(this).remove() first before it can call $(this).prev() and $(this).show().

Basically how can you preview and show what you have already removed by calling $(this).remove().

Let me know if this helps, I'm sure someone else can explain this far better than myself.

Happy coding.

1 Answer

Steven Parker
Steven Parker
243,656 Points

Kody is essentially correct. The original code uses the triggered element to identify and reveal the previous element, then remove itself.

If you remove it first, you cannot use it as the reference to identify and reveal the previous element. But, you could reverse the order of operations if you save the previous element first:

$("button").click(function() {
  var prev = $(this).prev();
  $(this).remove();
  prev.show();
});

Of course, the end result will appear the same, so in this case it's no advantage to change the order.