Попытка сопоставить класс и скрыть элемент

Question

Как скрыть определенный элемент класса на основе определенного идентификатора?

Например, в коде здесь, я хотел бы спрятал <div class="base"> с идентификатором 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> 

Answer 1

Предполагая, что вы используете JQuery, вы должны использовать код $("#green").hide(); для достижения этой цели. Чтобы получить один из разделов внутри «зеленого», вы можете использовать $("#green .base").hide();, чтобы скрыть его.

Hide Method

Answer 2

// 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>