CODEWITHSUNDEEP
javascripthtmlcss
GreetingsFriend
GreetingsFriend

Reputation: 341

Remove element's class using only JavaScript (no jQuery)

I'm trying to get an element by class name, and after, remove it's class.

I wish to accomplish that using JavaScript only, no jQuery.

Here is what I've tried already:

<script>
  var changeController = function() {
    var removeClass = document.getElementsByClassName("selected-hr")[0];
    removeClass.classList.remove("selected-hr");
  }
</script>

<div class="col col-25 selected-hr">
  <a class="tb-header-link" onclick="changeController()">ALL</a>
</div>

EDIT 1: Fixed typo at changeController()

Upvotes: 0

Views: 81

Answers (2)

zer00ne
zer00ne

Reputation: 44086

Pass this into changeController(), use parentNode property to reference the div. Place the <script> after the your markup (HTML) to ensure DOM is loaded before running script. Preferably before the </body> closing tag.

Snippet

a {text-decoration:none;}
.selected-hr {background:tomato;}
<div class="col col-25 selected-hr">
  <a href='#/' class="tb-header-link" onclick="changeController(this)">ALL</a>
</div>

<script>
  function changeController(ele) {
    var parent = ele.parentNode;
    parent.classList.remove("selected-hr");
  }
</script>

Upvotes: 1

Quentin
Quentin

Reputation: 944293

Just mentioning the name of a variable does nothing (even if the variable points to a function).

You have to call it if you want to do anything with it. Add ().

onclick="changeController()"

Upvotes: 0

Related Questions