Remove Classes from an element with jQuery question

Remove Classes from an element with jQuery question
0.0 0

#1

Tell us what’s happening:
i figured out what to add into the script element but my question is why put this excess stuff cant you just go down and backspace the btn-defaults?

*edit caught myself before posting this but yes can only change code before <!-- --!> maybe i skipped a part prior but why is this a thing again? why cant i just go down and edit that code? sorry im all over the place

Your code so far

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

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36.

Link to the challenge:


#2

Sorry, can you repeat the question?


#3

Also think DRY. With jQuery you can select a single class name and do something to them all.

So you can select .target and remove the class name once instead of repeating yourself.


#4

sorry to be more clear, why cant i just edit the code UNDER the <!-- --!> section?


#5

Because the whole point of the challenge is to teach you how to use jQuery to remove classes instead of having to manually do it.

Why would you ever need to do that? Let’s say you have designed a game app and you have a Start button. The Start button does not have any special CSS associated with it. Let’s say you have two other buttons (Pause and Stop) that have been given a class named “hidden”. Below is what the CSS definition for .hidden looks like:

.hidden {
  display:none; 
}

When the page loads, the Start button will be showing, but since the Pause and Stop buttons have the “hidden” class, they are not visible. Let’s say you want to make the game so that when the user clicks the Start button, the Start button should not be visible and the Pause and Stop buttons should be visible. You would need to have your JavaScript add the “hidden” class to the Start button and remove the class “hidden” from the Pause and Stop buttons when the Start button is clicked.