How can i remove dynamically class names using jquery and a second class name?

Question

this is my code. I want to remove a class name from tag <p> <=> $i=2. In the above code it removes the class name "test2" from all <p> tag. How can I do remove a class name from a specific tag if this have 2 class names. thx?

     <p class="test1 test2">text</p>
        <p class="test1 test2">text2</p>
        <p class="test1 test2">text3</p>
        <p class="test1 test2">text4</p>
        <p class="test1 test2">text5</p>
<script type="text/javascript"> 
function test(){
    for (var i = 1; i <= 5; i++) {
        if  (i ==2 ){
              $(".test1" ).removeClass("test2");
        }
    };
}

I re-readed your question and I became confused... Do you want to remove the `test2` class from the second element, or remove the `test2` class for all the `p` elements that contain 2 classes? — Loupax, Jan 29 '14 at 08:51
I want to remove the test2 from the second element using the class name test1 also from the second element in jquery — Attila Naghi, Jan 29 '14 at 08:53

score 1 · Answer 1 · answered Jan 29 '14 at 08:42

1

Can you try this, You include below one inside your <script>

$(function(){
$("p").each(function(index){    
   console.log(index); 
   if(index==1){
      $(this).removeClass('test2');
    }
  });    
});

Demo: http://jsfiddle.net/D5JwH/1/

answered Jan 29 '14 at 08:42

Krish R

22,583
7
50
59

score 1 · Accepted Answer · answered Jan 29 '14 at 08:50

1

Do

   $(".test1:eq(1)" ).removeClass("test2");

answered Jan 29 '14 at 08:50

Balachandran

9,567
1
16
26

this works for me, thx . But can you explain me , what is eq() ? – Attila Naghi Jan 29 '14 at 09:01
eq() selector in jquery is used to locate the DOM elements by specifying the index. It starts from 0. Since you require the second element, you have to specify the index as 1 to retrieve it. For more information, please refer this link :- http://api.jquery.com/eq-selector/ – Balachandran Jan 29 '14 at 09:34

score 0 · Answer 3 · answered Jan 29 '14 at 08:39

0

Try something like

$("p").removeClass().addClass("test2");

What it does is simply remove both classes and add the one u want to keep

answered Jan 29 '14 at 08:39

iJade

23,144
56
154
243

Loupax · Answer 4 · 2014-01-29T08:48:12.180

There, I fixed it for you:

<p class="test1 test2">text</p>
<p class="test1 test2">text2</p>
<p class="test1 test2">text3</p>
<p class="test1 test2">text4</p>
<p class="test1 test2">text5</p>
<script type="text/javascript">
    $(".test1:nth-child(2)" ).removeClass("test2");
</script>

What was wrong, was that you propably tried to run js code as if it was PHP

Javascript has to be included in <script> html tags and is executed the moment the browser receives it

Also, the code inside your loop was meaning: 'get all the elements with class test1 and remove the class test2 from them', so no matter what part of the loop the code gets executed on, all of the .test1 elements will loose their .test2 class.

The :nth-child(2) part of the jquery means 'get all the .test1 elements but only if they are the second child of their parent'.

score 0 · Answer 5 · edited May 23 '17 at 12:03

You can write the following script:

;!(function ($) {
$.fn.classes = function (callback) {
    var classes = [];
    $.each(this, function (i, v) {
        var splitClassName = v.className.split(/\s+/);
        for (var j in splitClassName) {
            var className = splitClassName[j];
            if (-1 === classes.indexOf(className)) {
                classes.push(className);
            }
        }
    });
    if ('function' === typeof callback) {
        for (var i in classes) {
            callback(classes[i]);
        }
    }
    return classes;
};
})(jQuery);

and then use it

$('div').classes();

It will return collection of classes assigned to the element.

source

score 0 · Answer 6 · answered Jan 29 '14 at 08:43

<p class="test1 test2">text</p>
<p class="test1 test2">text2</p>
<p class="test1 test2">text3</p>
<p class="test1 test2">text4</p>
<p class="test1 test2">text5</p>
<?php
var i=1;
$('p').each(function(index){
if (index == 2){
           $(this ).removeClass("test2");
      }
i=i+1;
}); 
?>

How can i remove dynamically class names using jquery and a second class name?

6 Answers6