Как передать id в функцию JS?

Question

Есть блок с контентом и кнопка с одинаковыми id

<div id="1">
Какой-то контент
<button id="1" onclick="delDiv(this.id)">Удалить</button>
</div>

Есть функция, которая вызывается по кнопке

function delDiv(id) {    
    document.getElementById(id).style.display = "none";
}

Но функция не работает. Что тут нужно исправить? Только без parentElement

Answer 1

Правильно, что не работает. HTML не валидный. Когда исправите - будет работать

На всякий случай можно переделать под это:

function delDiv(elem) {    
    elem.parentNode.style.display = "none";
}

<div id="div-1">
Какой-то контент
<button id="btn-1" onclick="delDiv(this)">Удалить</button>
</div>


<div id="div-2">
Какой-то контент
<button id="btn-2" onclick="delDiv(this)">Удалить</button>
</div>

т.к. на странице есть одинаковые идентификаторы...что не верно изначально

помимо этого div с id="1" есть другие div с id="1" в другой части кода. Мне нужно, чтобы при нажатии кнопки удалялись все div с id="1"

Элементам общим признаком надо присвоить класс и работать с ним. А кнопкам можно добавить data-атрибуты, для определения общего класса

function delDiv(elem) {    
    let divClass = elem.dataset.info;    
    
    [...document.querySelectorAll(`.${divClass}`)].forEach((elem) => {
       elem.style.display = "none";     
    });        
}

<div class="common-div">
Какой-то контент
<button id="btn-1" data-info="common-div" onclick="delDiv(this)">Удалить1</button>
</div>


<div class="common-div">
Какой-то контент
<button id="btn-2" data-info="common-div" onclick="delDiv(this)">Удалить1</button>
</div>


<div class="common-div2">
Какой-то контент
<button id="btn-1" data-info="common-div2" onclick="delDiv(this)">Удалить2</button>
</div>


<div class="common-div2">
Какой-то контент
<button id="btn-2" data-info="common-div2" onclick="delDiv(this)">Удалить2</button>
</div>

БЛОГ НА HUSL

Как передать id в функцию JS?

Ответы (1 шт):