CODEWITHSUNDEEP
javascripthtml
Leila K.
Leila K.

Reputation: 77

Select every child element in HTML except one

I'm trying to edit the style of the HTML elements in my website using javascript but instead of having to write each child element except one, is there a method in javascript to select everything under the parent div <div id = "pages"> except one child?

HTML

<div id = "pages">
  <div id = "page-1"></div>
  <div id = "page-2"></div>
  <div id = "page-3"></div>
  <div id = "page-4"></div>
</div>

Javascript

//is there a way to select every pages in div id = "pages" except for one page without typing 
//everything manually?
document.getElementbyId("page-1").style.display = "none";
document.getElementbyId("page-2").style.display = "block";
document.getElementbyId("page-3").style.display = "none";
document.getElementbyId("page-4").style.display = "none";

Upvotes: 3

Views: 1204

Answers (4)

Mister Jojo
Mister Jojo

Reputation: 22335

this way:

#pages > div:not([id="page-2"]) {
  display : none;
}
<div id = "pages">
  <div id="page-1">page-1</div>
  <div id="page-2">page-2</div>
  <div id="page-3">page-3</div>
  <div id="page-4">page-4</div>
</div>

If you hate CSS:

function ShowPage(pageID)
  {
  document.querySelectorAll('#pages > div').forEach(el =>
    {
    el.style.display = (el.id === pageID) ? 'block' : 'none'
    })
  }

ShowPage('page-2')
<div id="pages">
  <div id="page-1">page-1</div>
  <div id="page-2">page-2</div>
  <div id="page-3">page-3</div>
  <div id="page-4">page-4</div>
</div>

Upvotes: 3

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

  • Create a reusable function that accepts a desired page number
  • Use the Attribute selector [id^=page-] (meaning: starts with: page-)
  • Use a small regex to get the number suffix from every element ID
  • Use Element.classList's .toggle method:

const showPage = (num) => {
  document.querySelectorAll("[id^=page-]").forEach(EL => {
     const pageNum = +EL.id.replace(/\D+/, "");
     EL.classList.toggle("hide", pageNum !== num);
  });
};


showPage(2); 
showPage(3);
.hide {
  display: none;
}
<div id="pages">
  <div id="page-1">This is page 1</div>
  <div id="page-2">This is page 2</div>
  <div id="page-3">This is page 3</div>
  <div id="page-4">This is page 4</div>
</div>

Upvotes: 1

Real Quick
Real Quick

Reputation: 2810

You can use an array to store your ids to not include, that way you can add more ids in the long run. Then loop through the divs and check if the id is in the array.

const idsnotinclude = ["page-6"] 

 const divs = document.getElementById('pages').children;
 const divsArray = Array.from(divs);

 divsArray.forEach(function (div){
  if(idsnotinclude.includes(div.id)){
    div.style.display = "block";
    return;
  }
  
  div.style.display = "none";
 });
<div id = "pages">
  <div id = "page-1">1</div>
  <div id = "page-2">2</div>
  <div id = "page-3">3</div>
  <div id = "page-4">4</div>
  <div id = "page-5">5</div>
  <div id = "page-6">6</div>
  <div id = "page-7">7</div>
  <div id = "page-8">8</div>
  <div id = "page-9">9</div>
  <div id = "page-10">10</div>
</div>

Upvotes: 1

Yadab
Yadab

Reputation: 1883

You can do something like this.

let children = document.getElementById('pages').children;

for (let index = 0; index < children.length; index++){
  if (children[index].id !== 'page-2') {
    children[index].style.display = 'none';
  } else {
    children[index].style.display = 'block';
  }
}
<div id = "pages">
  <div id = "page-1">a</div>
  <div id = "page-2">b</div>
  <div id = "page-3">c</div>
  <div id = "page-4">d</div>
</div>

Upvotes: 1

Related Questions