Problem with "jQuery: Remove Classes from an Element with jQuery"

For some reason this challenge is behaving strangely. Whether or not it allows me to pass seems completely arbitrary. The challenge description is as follows:

"In the same way you can add classes to an element with jQuery’s addClass() function, you can remove them with jQuery’s removeClass() function.

Here’s how you would do this for a specific button:

$("#target2").removeClass("btn-default");

Let’s remove the btn-default class from all of our button elements."

It seems simple enough, so I just added the following to the top of my code:

$("button").removeClass("btn-default");

After adding this, my code at the top of the page is at follows:

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");
  });
</script>

It seems to be doing exactly what it’s supposed to be doing, as it has the same effect as removing the btn-default class from the button tag’s class attribute, but it would not pass the first test case “The btn-default class should be removed from all of your button elements.”

I decided I would experiment a bit, so I tried adding btn into the removeClass() function, so that it looked like this:

$("button").removeClass("btn btn-default");

Doing this caused my code to pass the first test condition, but fail the third test condition " You should only remove the btn-default class." It makes sense that it would fail this test, but it doesn’t make sense that this change would allow my code to pass the first test when it wasn’t earlier. So I tried changing my code back by removing btn and tried running it again, and again it was failing the first condition. I then copied $("button") from the line calling the addClass() function, and pasted it over $("button") on the line calling removeClass(), then ran my code again, and it passed all the tests.

I decided to look at my code again, wondering why it suddenly passed the tests when I hadn’t actually altered the code, then ran it again only to find that it again failed the first test.

At this point, I decided to look at the challenge guide, and noticed that the code seemed identical to what I had, with the only difference being that the code there had a comment. So I copied all of the code from the given solution over my own code just to see what would happen and tried running it, and it passed all of the tests. Then without altering anything, I ran it again several times, and it continually failed the first test.

I have no idea what is causing this, but it seems to be a bug with how the code is being tested.

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

Hello there,

Just to speed up some debugging:

  1. Do you have any browser extensions with access to freecodecamp.org?
  2. Which browser are you using/experiencing these issues with?
  3. Is this the first, and only, thus far, challenge you have experienced such an issue with?

After writing that, and testing a suspicion of mine:

  • This ‘error’ is occuring as once the code has been run, the classes have been added, as well as removed (as coded). Re-running the tests causes the code to start from a state different to the expected state. So, the end result is different, and the tests fail.

To solve, refresh the page. Perhaps, it might be useful to some, if the tests and seed code were rewritten, but refreshing the page, and ensuring the code is correct is a suitable fix.

Hope this helps

If you hit the submit button a couple of times, the test passes again. Which makes me believe that the test is running before the document is in a loaded state. I may be wrong but if we add $(document).ready(function(){}) in the test, it should solve the problem.

why don’t you join the freecodecamp github repository to help?