CODEWITHSUNDEEP
jquery
Bhakti Thakkar
Bhakti Thakkar

Reputation: 373

How to remove class of children using parent class in jquery?

I want to remove all children classes named test1 which are under intro class. So far I have done this but it's not working.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").find("div.test1").removeClass("test1");
  });
});
</script>

</head>
<body>


<p class="intro"><div class="test1">This is a paragraph test1.</div></p>
<button>Remove the "test1" class from intro class</button>

</body>
</html>

Upvotes: 0

Views: 2890

Answers (4)

Faizan Khan
Faizan Khan

Reputation: 583

After correcting a small mistake, changing p to div you can do something like this.

This should work:

$(".intro > .test1").removeClass("test1");

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50749

You have a few things you can change:

  1. You cannot have a div nested in a p tag. Instead, nest your p tag in your div.

  2. While it isn't needed, instead of using .find() you can change your selector to "div.intro p.test1" to get all p tags with the class test1 nested in the div with the class intro

See working example below:

$(document).ready(function(){
  $("button").click(function(){
    $("div.intro p.test1").removeClass("test1");
  });
});
.test1 {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="intro">
  <p class="test1">This is a paragraph test1.</p>
  <p class="test1">This is a paragraph test2.</p>
</div>
<button>Remove the "test1" class from intro class</button>

Upvotes: 2

Geoffrey Migliacci
Geoffrey Migliacci

Reputation: 402

Change the p to a div.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
      .test1 {
        background-color: red;
      }
    </style>
    <script>
      $(document).ready(function(){
          $("button").click(function(){
            $("div.intro").find("div.test1").removeClass("test1");
          });
      });
    </script>
  </head>
  <body>
      <div class="intro"><div class="test1">This is a paragraph test1.</div></p>
      <button>Remove the "test1" class from intro class</button>
   </body>
</html>

Upvotes: 1

Vel
Vel

Reputation: 9331

Check this. You need to change <p> to <div>

https://jsfiddle.net/gnanavelr/dqbwjzeu/2/

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".intro").find(".test1").removeClass("test1");
  });
});
</script>

</head>
<body>


<div class="intro"><div class="test1">This is a paragraph test1.</div></div>
<button>Remove the "test1" class from intro class</button>

</body>
</html>

Upvotes: 2

Related Questions