Удаление по id элемента.
Сколько вариантов существует удалить по id. Удалить сам "id" и удалить элемент по его "id"
Удаление "id" и элементов по "id"
- Удаление "id" у элемента.
- Удаление элемента по его "id"
- Пример удаление элемента по его "id" через javascript.
- Удаление элемента нажав по нему через "id".
Удаление "id" у элемента.
Начнем с удаления "id" через javascript.
Возьмем тег div
В него поместим id
Дадим ему, какое-то значение "example"
Добавим стили, чтобы было видно, что это именно этот id
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
Чтобы мы могли увидеть вживую удаление данного "id" нам понадобится:
Тег button.
Событие {onclick}.
И функция удаления атрибута removeAttribute
Соберем весь код вместе:
<style>#example{ border: 1px solid red; padding: 20px; margin: 20px 0;}</style>
<div id="example">здесь текст и блок <div id="example">
И стили:
div#example{
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
</div>
<button onclick="example.removeAttribute('id');">Отправить</button>
Пример удаления в реальном времени атрибута "id"
И вы можете открыть исследовать элемент прямо по тегу. И посмотреть вживую удаление атрибута "id"
И стили:
div#example{
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
Если вы не смогли найти, то вот на скрине:
Удаление "id" пример в коде:
Если вы не нашли куда смотреть или по другой причине не увидели процесс удаления "id", то специально для вас!
Когда вы открыли код исследовать элемент, то должны были увидеть вот такой код.
И далее, чтобы увидеть удаление id, нажмите кнопку "Удалить id" и смотрите на код, в ту его часть, красным выделен удаляемый id.
<br>
<p>И стили:</p>
<p>div#example{</p>
<p>border: 1px solid red;</p>
<p>padding: 20px;</p>
<p>margin: 20px 0;</p>
<p>}</p>
</div>
Удаление элемента по его "id"
Следующий пункт - удаление элемента по его "id" через javascript.
Не буду повторять все по пунктам, это аналогичное действие, но в отличии от предыдущего пункта, отличается только функция "remove"
Сразу перйдем к коду:
<div id="is_div">здесь текст и блок <div id="div">
И стили:
div#div {
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
</div>
<button onclick="is_div.remove('')">Отправить</button>
И далее полученный результат:
Пример удаления элемента по его "id" через javascript.
Чтобы увидеть удаление элемента по его "id" через javascript, нажмите прямо по ниже идущему исследовать элемент и смотрите прямо в живую, когда нажмете кнопку Удалить по idИ стили:
div#div {
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
Если вам требуется использовать данный код внутри скрипта, то :
<script>
is_div.remove(\'\');
</script>
Вы должны понимать, если вы напишете именно так, то блок удалится прямо после загрузки страницы, вы его не успеете увидеть.
Здесь и далее на сайте, где используется onclick внутри блока, то это лишь для того, чтобы показать, как оно должно работать вживую!
Пример удаление элемента по его "id" через javascript.
Следующий вариант удаления элемента по его "id" через javascript.
<div id="is_div_2">здесь текст и блок <div id="div">
И стили:
div#div {
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
</div>
<button onclick="my_foo()">Отправить</button>
<script>
function my_foo() {is_div_2.outerHTML='';}
</script>
И стили:
div#div {
border: 1px solid red;
padding: 20px;
margin: 20px 0;
}
Удаление элемента нажав по нему через "id".
Для удаления элемента нажав по нему "id" не нужен!
Для этого нам понадобится:
Блок - div.
Метод - onclick.
Свойство - outerHTML.
И - this
Чтобы мы могли его увидеть и понять, что именно это наш блок, добавим ему border
И чтобы мы увидели, что навели мышку на него, добавим cursor pointer
Теперь всё это нам нужно собрать:
