JQuery addclass to selected div, remove class if another div is selected

Question

I'm making a formbuilder, I would like to change the appearance of for example a heading div. When clicked it should get a border but when another dynamically generated div is clicked the class should be removed and the second clicked div has to get the .active class.

How can I do this with generated divs?

Anyway I found something that works but I still need the If another div is selected, previous div.removeclass and selected div.addclass

This works:

/* Add Class */
$(document).ready(function() {
    $( document ).on( 'click', '.HeadingDiv', function () { /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $('.HeadingDiv').removeClass('active'); /* This '.HeadingDiv' could be anything, I need something dynamic here */
        $(this).addClass('active');
    });
});

Matriculate

Answer 1

Are you looking something like this short and effective:

http://jsfiddle.net/XBfMV/

$('div').on('click',function(){
  $('div').removeClass('active');
  $(this).addClass('active');
});

you can simply add a general class 'active' for selected div. when a div is clicked, remove the 'active' class, and add it to the clicked div.

Alina

Caner Akdeniz yes the only problem is I have HeadingDiv and TextBoxDiv and TextAreaDiv ect. The previously clicked item could be anything – Matriculate

So do you 3 different groups and each will have its own selected object? – Alina

This will apply the active class for any div on the page, not just the ones inside your formbuilder... So if you click the footer div on your page it will get highlighted. You'll certainly want to limited the scope of selected divs. – Recapitulate

@Recapitulate it is pretty simple to do that with html. You can add one parent div called 'mySelectionArea' and when you are using jquery selector you can do $('#mySelectionArea div').on('click',function(){}); and so forth. Here you can see the updated fiddle: jsfiddle.net/XBfMV/4 – Alina

That's true what guydog28 says, I simply changed the elements from divs to list items like this: $( document ).on( 'click', 'ul#items li', function () { $('ul#items li').removeClass('active'); $(this).addClass('active'); }); – Matriculate

Answer 2

It's all about the selector. You can change your code to be something like this:

<div class="formbuilder">
    <div class="active">Heading</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

Then use this javascript:

$(document).ready(function () {
    $('.formbuilder div').on('click', function () {
        $('.formbuilder div').removeClass('active');
        $(this).addClass('active');
    });
});

The example in a working jsfiddle

See this api about the selector I used: http://api.jquery.com/descendant-selector/

Recapitulate

It has been very very useful :)! I did have to change the divs to list items because only that area could have the active class if i did it like the code above than also my toolbox div and properties div could get that class and that shouldn't happen. – Matriculate

Answer 3

You can use a single line to add and remove class on a div. Please remove a class first to add a new class.

$('div').on('click',function(){
  $('div').removeClass('active').addClass('active');     
});

Gunboat

Answer 4

In this mode you can find all element which has class active and remove it

try this

$(document).ready(function() {
        $(this.attr('id')).click(function () {
           $(document).find('.active').removeClass('active');
           var DivId = $(this).attr('id');
           alert(DivId);
           $(this).addClass('active');
        });
  });

Buchbinder

No that doesn't work, I edited my post. Thanks alot though I really like this because of people willing to help, like you :) – Matriculate

Answer 5

I had to transform the divs to list items otherwise all my divs would get that class and only the generated ones should get it Thanks everyone, I love this site and the helpful people on it !!!! You can follow the newbie school project at http://low-budgetwebservice.be/project/webbuilder.html suggestions are always welcome :). So this worked for me:

            /* Add Class Heading*/
            $(document).ready(function() {
            $( document ).on( 'click', 'ul#items li', function () { 
            $('ul#items li').removeClass('active'); 
            $(this).addClass('active');
            });
            });

Matriculate

Answer 6

**This can be achived easily using two different ways:**

1)We can also do this by using addClass and removeClass of Jquery
2)Toggle class of jQuery

**1)First Way**

$(documnet.ready(function(){
$('#dvId').click(function(){
  $('#dvId').removeClass('active class or your class name which you want to    remove').addClass('active class or your class name which you want to add');     
});
});

**2) Second Way**

i) Here we need to add the class which we want to show while page get loads.
ii)after clicking on div we we will toggle class i.e. the class is added while loading page gets removed and class which we provide in toggleClss gets added :)

<div id="dvId" class="ActiveClassname ">
</div

$(documnet.ready(function(){
$('#dvId').click(function(){
  $('#dvId').toggleClass('ActiveClassname InActiveClassName');     
});
});


Enjoy.....:)

If you any doubt free to ask any time...

Espouse