Remove selector-class jquery

Question

How to remove class(class with selector) using jquery ?

.div-group > .swipey > li

Here the sample code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").removeClass("div-group swipey >li");
  });
});
</script>
<style>
.div-group > .swipey > li {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<div class="div-group">
<ul class="swipey">
  <li class="intro">This is a paragraph.</li>
  <li class="intro">This is another paragraph.</li>
</ul>
</div>
<button>Remove the "intro" class from all p elements</button>

</body>
</html>

Edit (clarification from comments on an answer)

In the css there's

.div-group > .swipey > li { 
    font-size: 120%; color: red; 
}

I didn't want to use that, can I remove that using jquery ?

To override css styling, you have a number of choices - 1) use a different class (eg not .swipey) 2) add a later override in your own css 3) add this via jquery (not trivial/obvious how) 4) override the style on the element. Assuming (4): `$(".div-group > .swipey > li").css("color", "blue").css("font-size", "100%");` — freedomn-m, Apr 27 '20 at 15:53
@freedomn-m Okee it's worksss, but how if i want to remove the color ? because i set "color", " " .. it's not working — Pandu Arif Septian, Apr 27 '20 at 16:02
If you actually want to remove the style definition from the stylesheet, you would have to use a method similar to this: https://stackoverflow.com/a/29922442/746736. It would be much simpler to just override the styles in your own CSS and forget about using jQuery. — Turnip, Apr 27 '20 at 16:08
OMG, @freedomn-m and Turnip .. i mixed you both suggestion, it's work i found the way.. i remove first and then i overide the styles. thankyou so much sifhu — Pandu Arif Septian, Apr 27 '20 at 16:29

Lachee · Answer 1 · 2020-04-27T15:50:54.377

0

I assume you mean like this:

$(".div-group .swipey > li").removeClass("intro");

You cannot "remove a selector/query" as that is like a path. Instead you want to find the element based of that selector and remove the class from that.

edited Apr 27 '20 at 15:50

answered Apr 27 '20 at 15:43

Lachee

125
1
7

Thanks for answer . But what i want to remove is this style ... .div-group > .swipey > li – Pandu Arif Septian Apr 27 '20 at 15:44
2

`.div-group > .swipey > li` is not a **style** (or a **class**) - it's a selector to an **element** - did you want to remove the element itself? – freedomn-m Apr 27 '20 at 15:47
1

because on the css there's : i didn't want to use that, can i remove that using jquery ? – Pandu Arif Septian Apr 27 '20 at 15:48
You could just override the existing styling if you don't want it the way it currently is? – Miniman Apr 27 '20 at 15:54
the problem the class is automatic it's a 3rd party platfrom, i cannot touch that css, so i want to force delete it by jquery huhu, so stuck ... – Pandu Arif Septian Apr 27 '20 at 15:56
That's not how css works - whichever is the last definition takes overrides all the others - so as long as your definition is the same and is last, it will use your definition – freedomn-m Apr 27 '20 at 15:59

Remove selector-class jquery

1 Answers1