Как клику на крестик удалить сообщение?

Question

[Андрей]

function CloseSMSOne(){
document.querySelectorAll("block1, block1 > a,h3,p ").remove();
}

<div class="block" id="block1">
<a onclick="CloseSMSOne()">×</a>
<h3>Сообщение</h3>
<p>Привет</p>
</div>

a{
cursor: pointer;
color: red;
font-size: 200%;
font-family: Arial, Helvetica, sans-serif; 
text-decoration: none; 
}
p{
font-family: Arial, Helvetica, sans-serif;  
}
h3{
font-family: Arial, Helvetica, sans-serif;
}
.block{
margin: 10px;
width: 350px;
height: auto;
background-color: bisque;
padding: 10px;
border-radius: 10px;
}

Comments

[ThunderCat]

И в чем проблема?
Вообще querySelectorAll() возвращает коллекцию, а не объект, это вам не jquery.

[Андрей]

ThunderCat, То есть с помощью querySelectorAll() нельзя удалить/скрыть объект?

[ThunderCat]

Andrii_UA, Еще раз: querySelectorAll() возвращает коллекцию, НЕ ЭЛЕМЕНТ. Удалить/скрыть можно только один конкретный элемент.

[Андрей]

ThunderCat, TheAndrey7, Спасибо, часа 2 возился с querySelector, пробывал удалить елемент

[Ankhena]

0. Не путайте кнопки и ссылки. Переход - ссылка, действие - кнопка. Можно использовать ссылку вместо кнопки, если у вас есть в запасе страница, на которой нет этого сообщения и пользователь сможет туда перейти после нажатия на неё.
1. Зачем вы удаляете div, а потом еще его внутренности, если он весь целиком со всеми потрохами уже удалился?
2. Указываете неверный селектор, у вас id, а пишете, как будет это тег ("#block1")
3. Не нужен будет querySelectorAll (на самом деле будет нужен, но не для этого).
Итого, достаточно

function CloseSMSOne(){
document.querySelector("#block1").remove();
}

НО всё это будет так работать только если вам нужно удалять только одно сообщение.

Нормальное решение:
Перестаете писать js в разметке.
Пишете скрипт, который находит все кнопки с крестиками через тот самый querySelectorAll. Перебираете в цикле, например, через forEach. Вешаете на каждую слушатель клика addEventListener. При клике удаляете соответствующий родительский элемент с классом .block

Answer 1

[Владимир Ясанкин]

В функцию помести document.getElementById("block1").innerHTML=""