Javascript remove class from element (div, ul li, ol li, img, table)

To make the webpage beautiful, it needs to be decorated with Css, and the Css is applied to the specific html elements by class attribute. There are various applications, sometimes you need to add the class attribute to the html element, and sometimes you need to delete the class attribute. In fact, if you don't decorate the html element, you don't have to delete it. You can set it to empty, and the style of the element is not there.

Deleting the class attribute of an html element is actually removing it in javascript. This method is used not only to remove the class attribute, but also to remove all attributes of the html element.

I. Remove class from div javascript

If there are div element as follows:

<div id="divId" class="content">Javascript remove class from element, for example, remove class from div javascript</div>

The Css used for the div is:

.content{width:980px;margin:auto;}

//Remove class from div
       var obj = document.getElementById("divId");
       obj.removeAttribute("class");//Remove class from div
       obj.class = "";//Set the class of div to empty
       obj.setAttribute("class", "");//Set the div's class to empty (method two)

II. Remove class from ul li, ol li using in javascript

1. If there are ul li as follows:

<ul id="ulId" class="list"><li>Remove class from li using javascript</li></ul>

var ul = document.getElementById("ulId");
       ul.removeAttribute("class");//Remove class from ul
       ul.class = "";//Set the class of ul to empty
       ul.setAttribute("class", "");//Set the ul's class to empty (method two)

//Remove class from li
       var li= ul.childNodes;//li is the child of ul, you can get li through childNodes
       for (var i = 0; i < li.length; i++) {
               li[i].removeAttribute("class");//Cycle delete all li class attributes
       }

If li has an Id, you can also get li by Id. If you want to delete the first child of ul, you can also get it through firstChild; in the same way, you can get the last child of ul through lastChild; deleting the middle child can only use the loop when li has no Id.

2. If there are ol li as follows:

<ol id="ol" class="ollist"><li>Remove class from ol li using javascript</li></ol>

//Remove class from ol
       var ol = document.getElementById("ol");
       ol.removeAttribute("class");//Remove class from ol

//Remove class from li in ol
       var ol = document.getElementById("ol");
       var li = ol.firstChild;//li is the first child of ol, you can get li through ol
       li.removeAttribute("class");//Remove class from li

III. Remove class from img using in javascript

If there are img as follows:

<img id="imgId" src="/images/test.jpg" class="imgstyle" alt="Javascript delete class from img" />

var obj = document.getElementById("imgId");
       obj.removeAttribute("class");

IV. Remove class from table using in javascript

If there are tabel as follows:

<table id="tableId" cellpadding="0" cellspacing="0" class="content">
              <tr><td>Remove class from table using in javascript</td>
              <td>Javascript delete class from table</td></tr>
       </table>

var obj = document.getElementById("tableId");
       obj.removeAttribute("class");