freeCodeCamp/remove-classes-from-an-element-with-jquery.english.md at 65d4cfddea946a30a402205cebada6ca763e332b

Randell Dawson a53d992613 fix(curriculum): Remove unnecessary assert message argument from English Front End Libraries challenges - 01 (#36408 )

* fix: removed assert msg argument

* fix: removed more assert msg args

* fix: removed assert msg missed

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: correct indentation

2019-07-25 08:53:37 +02:00

3.5 KiB

Raw Blame History

id, title, required, challengeType

title

required

challengeType

bad87fee1348bd9aed918626

Remove Classes from an Element with jQuery

link
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css

Description

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.

Instructions

Tests

tests:
  - text: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.
    testString: assert($(".btn-default").length === 0);
  - text: Only use jQuery to remove this class from the element.
    testString: assert(code.match(/btn btn-default/g));
  - text: Only remove the <code>btn-default</code> class.
    testString: assert(code.match(/\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm));

Challenge Seed

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");

  });
</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>

Solution

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").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>

3.5 KiB Raw Blame History