Как добавить display: none; в разметке html по клику?

115

07 ноября 2021, 02:40

Как добавить style="display: none;" для test-class1 в разметке html по клику на кнопку без присвоения css-класса с display: none;?

<button class="test-class1">Скрыть</button> 
 
<div class="test-class2">Скрой меня!</div>

Answer 1

В общем случае:

Ваша_кнопка.addEventListener('click', function(){
  Скрываемый_элемент.style.display = "none";
});

Часто таких пар кнопка-блок бывает много, поэтому можно писать для списка элементов, а не конкретно одного. А если часто в коде будет встречаться такое изменение свойства, бывает удобно написать короткую функцию:

let btn = document.querySelectorAll('.btn'); 
let bubu = document.querySelectorAll('.bubu'); 
 
for( let i = 0; i < btn.length; i++ ){ 
  btn[i].addEventListener('click', function(){ 
    display( bubu[i], "none" );     
     
    console.log( 'Индекс i = ' + i ); 
  }); 
} 
 
function display(elems, value){ 
  value = value || "block";  
  // Если функцию вызвать только с одним аргументом, второй будет "block" 
   
  if( elems instanceof HTMLElement ){   
    // Если elems - один HTML-элемент 
    elems.style.display = value;     
    // изменится свойство элемента и выполнение функции прервется из-за return. 
    return; 
  } 
   
  // А можно передать список элементов и одним вызовом скрыть все. 
  for( let i = 0; i < elems.length; i++ ){ 
    elems[i].style.display = value; 
  } 
}

<button class="btn">Скрыть</button> 
<div class="bubu">Скрой меня!</div><br> 
 
<button class="btn">Скрыть</button> 
<div class="bubu">Скрой меня!</div><br> 
 
<button class="btn">Скрыть</button> 
<div class="bubu">Скрой меня!</div>

Answer 2

document.querySelector('.test-class1').addEventListener('click', function(e){ 
  e.target.style.display='none'; 
})

<button class="test-class1">Скрыть</button> 
 
<div class="test-class2">Скрой меня!</div>

Answer 3

универсальный компонент, который помогает вам в скрытии каких-либо элементов по нажатию на какого-то родителя, целей (target) может быть сколько угодно

class HiddenElements { 
  constructor(node) { 
    this.node = node; 
 
    if (!this.node) return; 
 
    this.target = this.node.getAttribute('data-target'); 
 
    if (!this.target) 
      throw new Error('Missing required parameter "data-target"'); 
 
    this.onClick = this.onClick.bind(this); 
 
    this.node.addEventListener('click', this.onClick, false); 
  } 
 
  onClick() { 
    const targets = document.querySelectorAll(`[data-name=${this.target}]`); 
 
    this.hide(targets); 
  } 
 
  hide(targets) { 
    [...targets].forEach(target => target.classList.add('hide')); 
  } 
} 
 
[...document.querySelectorAll('[data-widget="hide"]')].forEach(node => new HiddenElements(node));

body { 
  font-family: "Roboto", sans-serif; 
  line-height: 1.2; 
} 
 
[data-widget="hide"] { 
  font-size: 18px; 
  font-weight: 500; 
} 
 
.hide { 
  display: none; 
}

<div class="block" data-widget="hide" data-target="target1">Click to hide targets with data-name="target1" attribute</div> 
 
<div class="block" data-name="target1">1st target of target1</div> 
 
<div class="block" data-name="target1">2td target of target1</div> 
 
<div class="block" data-widget="hide" data-target="target2">Click to hide targets with data-name="target2" attribute</div> 
 
<div class="block" data-name="target2">1st target of target2</div>