I have this html structure:

  <div id="xyz"> </div>
  <div class="content"> </div>

i want to hide the element with class named content given the sibling element id which is xyz , in jQuery i can easily do it like this:

$("#xyz").siblings('.content').css({"dispaly": "none"});

how can i achieve the same thing using pure Javascript only ?

I have this html structure:

  <div id="xyz"> </div>
  <div class="content"> </div>

i want to hide the element with class named content given the sibling element id which is xyz , in jQuery i can easily do it like this:

$("#xyz").siblings('.content').css({"dispaly": "none"});

how can i achieve the same thing using pure Javascript only ?

• javascript
• html
• element

• Does this help gomakethings./…? – Tushar Shahi Commented Jul 1, 2021 at 4:27

4 Answers 4

document.querySelector("#xyz + .content").style.display = "none";

jsfiddle

document.getElementById("xyz").nextElementSibling.style.display = 'none';

try like this:

var x = document.getElementById("xyz").nextSibling;
while(true){   
   if(typeof(x) === "undefined"){
      break;
   }else if( x.className === "content"){
      x.style.display = 'none';
   }

   x = x.nextSibling;
}

Sorry, this code i still not testing yet.

what about just

document.getElementsByClassName("content")

u can use it like

document.getElementsByClassName("content")[0].style.display = "none"