Add remove class functionality in JavaScript

Question

I am making a add or remove class functionality in JavaScript but it is not working.

here is my code...

 if (window.location.hash == "#/profile/"){
        document.getElementById("tabMenu").removeClass("bottomTabs").addClass("hidden");
    } else{
        document.getElementById("tabMenu").className += "show";
    };

I suspect you are trying to use JQuery.removeClass. I don't think angularJS have its own helpers to do so. Or you are writing your own? (than you need to post code how you wire it up to all elements). — Alexei Levenkov
– Alexei Levenkov, Commented Apr 9, 2014 at 5:39
@AlexeiLevenkov, AngularJS has a subset of jquery dom manipulation interface through angular.element(). This includes css class manipulators as well — shanks
– shanks, Commented Apr 9, 2014 at 7:08

shanks · Accepted Answer · 2014-04-09 05:52:12Z

2

If you are using AngularJS, then use the angular.element("#elementID") function to activate its internal jqlite so your code would look like this.

var tabMenu = angular.element("#tabMenu");
if (window.location.hash == "#/profile/"){
        tabMenu.addClass("hidden")
    } else{
        tabMenu.removeClass("hidden")
    };

Click here for angular.element documentation

answered Apr 9, 2014 at 5:52

shanks

94213 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohammed Javed Over a year ago

(Same thing with this code )----is working but first time page load it is not after reload page it working and if i am load page in different window same thing doing after reload it working fine how to fix it.

shanks Over a year ago

imho, this has something to do with your thought process. use the hasClass to check for the currently containing class and switch classes appropriately using the add and removeClass method. My example was just trying to illustrate that you can do DOM class manipulations in angularjs.

Alexei Levenkov Over a year ago

+1. I did not know that andgularJS have its own implementation for basic operations.

jfriend00 · Accepted Answer · 2014-04-09 06:41:28Z

1

If you want some simple and general purpose functions in plain javascript for adding and removing classes that won't disturb any other classes on the element that you can use in lots of places, you can use these:

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function addClass(elem, cls) {
    elem.className += (" " + cls);
}


 var elem = document.getElementById("tabMenu");
 if (window.location.hash == "#/profile/"){
        removeClass(elem, "bottomTabs");
        addClass(elem, "hidden");
    } else {
        addClass(elem, "show");
 }

answered Apr 9, 2014 at 6:41

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Comments

Kyo · Accepted Answer · 2014-04-09 05:49:21Z

0

Using pure JS, it would look like below:

var myElement = document.getElementById("tabMenu");
if (window.location.hash == "#/profile/"){
    myElement.className = myElement.className.replace("bottomTabs", "");
    myElement.className = myElement.className + " hidden";
} else{
    myElement.className = myElement.className + " show";
};

See the demo below:

JSFiddle

answered Apr 9, 2014 at 5:49

Kyo

9645 silver badges10 bronze badges

Comments

j.wittwer · Accepted Answer · 2014-04-09 06:22:39Z

0

Since you are using angular, why not let ng-class do the adding and removing of classes?

<div ng-class="{'bottomTabs': !onProfile(), 'hidden': onProfile(), 'show': !onProfile()}">
</div>

You just need to create a function that returns true when the profile page is in view:

$scope.onProfile = function() {
   return window.location.hash == "#/profile";
};

Here is a working demo: http://plnkr.co/xh3KkxaHKuLtqIPpfE5Z

answered Apr 9, 2014 at 6:22

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Comments

Deepu--Java · Accepted Answer · 2014-04-09 07:19:35Z

0

<script type="text/javascript">
$(document).ready(function () {
    if (window.location.hash == "#/profile/") {
        $("#tabMenu").hide();
    }
}
</script>

Try this code. Before this add jquery in your page

edited Apr 9, 2014 at 7:19

answered Apr 9, 2014 at 5:43

Deepu--Java

3,8403 gold badges21 silver badges31 bronze badges

5 Comments

Kyo Over a year ago

removeClass() is a jQuery method, not javascript.

Mohammed Javed Over a year ago

code is working but first time page load it is not after reload page it working and if i am load page in different window same thing doing after reload it working fine how to fix it.

Deepu--Java Over a year ago

when you are calling this code. Means in what event?

Mohammed Javed Over a year ago

@Deepak2221 i am create bottomTabs for some unique pages but tabs are coming on all pages so i want to hide this on some page.

Deepu--Java Over a year ago

@user3256161 then you should accept the answer and upvote this.

Collectives™ on Stack Overflow

Add remove class functionality in JavaScript

5 Answers 5

3 Comments

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related