Javascript way of doing for this example

Question

This works fine with jQuery.

The same example I want to implement only with Javascript. Please help me how to proceed.

A working demo will help me a lot.

Thanks.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>removeClass demo</title>
  <style>
  p {
    margin: 4px;
    font-size: 16px;
    font-weight: bolder;
  }
  .blue {
    color: blue;
  }
  .under {
    text-decoration: underline;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>

<script>
$( "p:even" ).removeClass( "blue" );
</script>

</body>
</html>

Possible duplicate of [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) — Neelesh, Jun 22 '16 at 06:53
My question is how I can implement $("p:even") with Javascript — srikanth_k, Jun 22 '16 at 07:00

Rayon · Accepted Answer · 2016-06-22T07:09:24.927

1

Use nth-child

[].forEach.call(document.querySelectorAll("p:nth-child(even)"), function(elem, index) {
  elem.classList.remove("blue");
});

p {
  margin: 4px;
  font-size: 16px;
  font-weight: bolder;
}
.blue {
  color: blue;
}
.under {
  text-decoration: underline;
}
.highlight {
  background: yellow;
}

<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>

edited Jun 22 '16 at 07:09

answered Jun 22 '16 at 06:58

Rayon

36,219
4
49
76

Thanks.Can you please tell me how to add a class to odd elements also – srikanth_k Jun 22 '16 at 07:08
@SrikanthReddyKarnati, Refer the documentation.. Use `odd` instead of `even`! Quiet simple ;) – Rayon Jun 22 '16 at 07:10

score 0 · Answer 2 · answered Jun 22 '16 at 06:59

0

There are many ways, here's one...

var paras = document.getElementsByTagName('p');
for(var i=0; i < paras.length; i += 2){
    paras[i].className = paras[i].className.replace(/\b\s*blue\s*\b/, ' ');
}

answered Jun 22 '16 at 06:59

Billy Moon

57,113
24
136
237

score 0 · Answer 3 · edited Jun 22 '16 at 09:23

Selecting even elements from HTML DOM using javascript

DEMO

$(document).ready(function(){
     /*this is using javascript*/
        var table = document.getElementById("mytab1");
        for (var i = 0, row; row = table.rows[i]; i++) {
           if(i%2==0){
              /*even row*/
              console.log(row)
           }else{
           /*odd row*/
           }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytab1" border="1">
    <tr>
      <th>Company</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>UK</td>
    </tr>
  </table>

Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. — Ivar, Jun 22 '16 at 07:16
Please check now I've added code as well as jsFiddle link in my answer. — Bhaumik Pandhi, Jun 22 '16 at 07:30

Javascript way of doing for this example

3 Answers3