CODEWITHSUNDEEP
jquery
Marek Peisar
Marek Peisar

Reputation: 1

Trying to match by class and hide element

How can I hide an specific class element based on specific id?

For example, in the code here, I'd like to hid the <div class="base"> with id green

<div id="green">
<div class="base" onclick="prirad(1, 'green')"></div>
<div class="three_s" onclick="prirad(2, 'green')"></div>
<div class="three_v" onclick="prirad(3, 'green')"></div>
<div class="two_s" onclick="prirad(4, 'green')"></div>
<div class="two_v" onclick="prirad(5, 'green')"></div>
<div class="square" onclick="prirad(6, 'green')"></div>
</div>
<div id="blue">
<div class="base" onclick="prirad(1, 'blue')"></div>
<div class="three_s" onclick="prirad(2, 'blue')"></div>
<div class="three_v" onclick="prirad(3, 'blue')"></div>
<div class="two_s" onclick="prirad(4, 'blue')"></div>
<div class="two_v" onclick="prirad(5, 'blue')"></div>
<div class="square" onclick="prirad(6, 'blue')"></div>
</div>

Upvotes: 0

Views: 34

Answers (2)

kjpc-tech
kjpc-tech

Reputation: 570

Assuming you are using jQuery, you would use the code $("#green").hide(); to accomplish this. To get one of the divs inside of 'green' you could use $("#green .base").hide(); to hide it.

Hide Method

Upvotes: 1

Felix Fong
Felix Fong

Reputation: 985

// Get all id green element
const allHideElement = document.querySelectorAll("div #green");
// Loop all the element
allHideElement.forEach(function(element){
  // Add the class of "isHdie" of match element,but you can do anything you want :P
  element.classList.add("isHide");
});
.isHide{
  background: skyblue;
  width: 10em;
  height: 10em;
}
<div id="green">
<div class="base" onclick="prirad(1, 'green')"></div>
<div class="three_s" onclick="prirad(2, 'green')"></div>
<div class="three_v" onclick="prirad(3, 'green')"></div>
<div class="two_s" onclick="prirad(4, 'green')"></div>
<div class="two_v" onclick="prirad(5, 'green')"></div>
<div class="square" onclick="prirad(6, 'green')"></div>
</div>
<div id="blue">
<div class="base" onclick="prirad(1, 'blue')"></div>
<div class="three_s" onclick="prirad(2, 'blue')"></div>
<div class="three_v" onclick="prirad(3, 'blue')"></div>
<div class="two_s" onclick="prirad(4, 'blue')"></div>
<div class="two_v" onclick="prirad(5, 'blue')"></div>
<div class="square" onclick="prirad(6, 'blue')"></div>
<div id="green"></div>
</div>

Upvotes: 0

Related Questions