Javascript OnClick Скрыть Div

Question

Я хочу скрыть этот предупреждающий div, используя внутри него javascript.

Я правильно понял, что у меня есть javascript?Я хочу скрыть / закрыть div, когда нажимаю на значок закрытия (images / close_icon.gif)

<div>
  <strong>Warning:</strong>
  These are new products
  <a href='#' class='close_notification' title='Click to Close'>
    <img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="this.close" />
  </a
</div>

Answer 1

Если вы хотите закрыть его, вы можете либо скрыть его, либо удалить со страницы. Чтобы скрыть это, вы должны сделать javascript вроде:

this.parentNode.style.display = 'none';

Для его удаления вы используете removeChild

this.parentNode.parentNode.removeChild(this.parentNode);

Если бы у вас была такая библиотека, как jQuery, то скрыть или удалить div было бы немного проще:

$(this).parent().hide();
$(this).parent().remove();

Еще одна вещь, поскольку ваш img находится в якоре, событие onclick на якоре также будет срабатывать. Так как для href установлено значение #, страница будет прокручиваться обратно к началу страницы. Как правило, хорошей практикой является то, что если вы хотите, чтобы ссылка выполняла что-то иное, чем переход к ее href, вы должны установить событие onclick на return false;

Answer 2

Простой и лучший способ:

onclick="parentNode.remove()"

Удаляет полный родительский элемент из HTML

Answer 3

HTML

<div id='hideme'><strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'><img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" /></a

Javascript:

function hide(obj) {

    var el = document.getElementById(obj);

        el.style.display = 'none';

}

Answer 4

просто добавьте обработчик onclick для тега привязки

onclick="this.parentNode.style.display = 'none'"

или измените обработчик onclick для тега img

onclick="this.parentNode.parentNode.style.display = 'none'"