jqueryhtmlremoveclass

Attempt to removeClass in jquery fails

I am attempting to remove the classes div1 and intro from this HTML code.

Snippet sample :

$(function() {
  $('div').on('click', function() {
    alert("Hello");
    $("div").removeClass("div1");
    $("p").removeClass("intro");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>
<p class="intro">This is a paragraph.</p>
<p class="intro">This is another paragraph.</p>

Now when I click on the div I get hello alert but div1 and intro classes are not removed. Any suggestions on what I might be missing here ?

Update: I should have been using remove instead of removeClass. Fiddle sample.

Solution

  • It appears the issue was a misunderstanding between remove and removeClass. OP wanted to remove an element from the DOM, and should therefore use remove(), instead of wanting to remove the class using removeClass()

    jsfiddle