CODEWITHSUNDEEP
javascriptjqueryhtml
Tanker
Tanker

Reputation: 1181

Add and remove class

I have a basic HTML using bootstrap, container > row > col > div ID > panel in that order, the class is placed in div ID, the thing is that I need to remove that class from that DIV and put it in another DIV(the one you click on), I know how to check if the class exist in any div inside of a div but I don't know how to delete it from there and add it to another.

I have made a Fiddle to illustrate this question. When you load the page, the class is already there. If you click any of the boxes it will alert you that in fact the class exist but don't know which div has it. The idea is to remove the class from whaveter that might be and add it to the div you click.

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div id="s1">
            <div class="panel panel-default">
                  <div class="panel-heading">1</div>
                  <div class="panel-body">1</div>
            </div>
            </div>
        </div>
     <div class="col-sm-3">
         <div id="s2" class="selection">
            <div class="panel panel-default">
                  <div class="panel-heading">2</div>
                  <div class="panel-body">2</div>
            </div>
         </div>
        </div>
        <div class="col-sm-3">
            <div id="s3">
            <div class="panel panel-default">
                  <div class="panel-heading">3</div>
                  <div class="panel-body">3</div>
            </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div id="s4">
            <div class="panel panel-default">
                  <div class="panel-heading">4</div>
                  <div class="panel-body">4</div>
            </div>
            </div>
        </div>
        </div>
    </div>

JS

$("#s1").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});
$("#s2").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});
$("#s3").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});
$("#s4").click(function() {
    if($(".selection")[0]) {
        alert('Class exist');
        $(".selection")[0].removeClass('.selection');
    }
});

Upvotes: 1

Views: 248

Answers (3)

Vicky
Vicky

Reputation: 704

Here is a way to achieve what you required . What i have done with your code is

HTML

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div id="s1" class="divs">
            <div class="panel panel-default">
                  <div class="panel-heading">1</div>
                  <div class="panel-body">1</div>
            </div>
            </div>
        </div>
     <div class="col-sm-3">
         <div id="s2" class="selection divs">
            <div class="panel panel-default">
                  <div class="panel-heading">2</div>
                  <div class="panel-body">2</div>
            </div>
         </div>
        </div>
        <div class="col-sm-3">
            <div id="s3" class="divs">
            <div class="panel panel-default">
                  <div class="panel-heading">3</div>
                  <div class="panel-body">3</div>
            </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div id="s4" class="divs">
            <div class="panel panel-default">
                  <div class="panel-heading">4</div>
                  <div class="panel-body">4</div>
            </div>
            </div>
        </div>
        </div>
    </div>

CSS

.container {
    max-width:400px;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
    border: 1px solid black;
    cursor: pointer;
}
.selection {
    background-color: black;
    padding:15px;
}

JQUERY

$(document).ready(function(){
    $(".panel").on("click",function(){
        var divid="#"+$(this).parent().attr("id");
        $(".divs").removeClass("selection");
        $(divid).addClass("selection");
    });
});

Note that i have just added a simple class as "divs" to each of the parent div of the panel.

What i have done here is i have first got the id of the parent div of the panel which has been clicked by the user . Then i have removed the class "selection" from the parent divs "s1 s2 s3 s4" accessing it with the help of the common class "divs" . then i have added the class "selection" to the div which has been clicked.

Here is the DEMO for your reference.

NOTE: This code will work for any number of panels you create.

Upvotes: 1

j08691
j08691

Reputation: 208040

You can reduce your code to:

$("#s1,#s2,#s3,#s4").click(function () {
    $(".selection").removeClass('selection');
    $(this).addClass('selection');
});

jsFiddle example

In your example:

  • $(".selection")[0].removeClass('.selection'); doesn't need [0] and there should be no period in the class you pass to removeClass()
  • You reference the div you click on with $(this)
  • As long as the selection class exists somewhere, if($(".selection")[0]) { will always be true, so it didn't really make sense to use that as a condition.

Upvotes: 3

jogesh_pi
jogesh_pi

Reputation: 9782

do it like this: 

$("#s1").click(function() {

    // Check class on the clicked section
    if($(this).hasClass('selection') ) {
        alert('Class exist');

        // class found then remove it.
        $(this).removeClass('.selection');
    }
});

Take a look on these to know more: .hasClass(), .addClass(), .removeClass()

Upvotes: 0

Related Questions