Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Удаление по id элемента.

Поддержи проект!!! smile

Сколько вариантов существует удалить по id. Удалить сам "id" и удалить элемент по его "id"

Удаление "id" и элементов по "id"

  1. Удаление "id" у элемента.
  2. Удаление элемента по его "id"
  3. Пример удаление элемента по его "id" через javascript.
  4. Удаление элемента нажав по нему через "id".
  1. Удаление "id" у элемента.

    Начнем с удаления "id" через javascript.

    Возьмем тег div

    В него поместим id

    Дадим ему, какое-то значение "example"

    Добавим стили, чтобы было видно, что это именно этот id

    div#example{
    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">здесь текст и блок &lt;div id=&quot;example&quot;&gt;

    И стили:

    div#example{

    border: 1px solid red;

    padding: 20px;

    margin: 20px 0;

    }

    </div>

    <button onclick="example.removeAttribute('id');">Отправить</button>

    Пример удаления в реальном времени атрибута "id"

    И вы можете открыть исследовать элемент прямо по тегу. И посмотреть вживую удаление атрибута "id"

    здесь текст и блок <div id="example">

    И стили:

    div#example{

    border: 1px solid red;

    padding: 20px;

    margin: 20px 0;

    }

    Если вы не смогли найти, то вот на скрине:

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Пример удаления  в реальном времени  атрибута ‘id‘

    Удаление "id" пример в коде:

    Если вы не нашли куда смотреть или по другой причине не увидели процесс удаления "id", то специально для вас!

    Когда вы открыли код исследовать элемент, то должны были увидеть вот такой код.

    И далее, чтобы увидеть удаление id, нажмите кнопку "Удалить id" и смотрите на код, в ту его часть, красным выделен удаляемый id.

    <div id="example">здесь текст и блок &lt;div id="example"&gt;

    <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>

  2. Удаление элемента по его "id"

    Следующий пункт - удаление элемента по его "id" через javascript.

    Не буду повторять все по пунктам, это аналогичное действие, но в отличии от предыдущего пункта, отличается только функция "remove"

    Сразу перйдем к коду:

    <div id="is_div">здесь текст и блок &lt;div id=&quot;div&quot;&gt;

    И стили:

    div#div {

    border: 1px solid red;

    padding: 20px;

    margin: 20px 0;

    }

    </div>

    <button onclick="is_div.remove('')">Отправить</button>

    И далее полученный результат:

    Пример удаления элемента по его "id" через javascript.

    Чтобы увидеть удаление элемента по его "id" через javascript, нажмите прямо по ниже идущему исследовать элемент и смотрите прямо в живую, когда нажмете кнопку Удалить по id
    здесь текст и блок <div id="div">

    И стили:

    div#div {

    border: 1px solid red;

    padding: 20px;

    margin: 20px 0;

    }

    Если вам требуется использовать данный код внутри скрипта, то :

    <script>

    is_div.remove(\'\');

    </script>

    Вы должны понимать, если вы напишете именно так, то блок удалится прямо после загрузки страницы, вы его не успеете увидеть.

    Здесь и далее на сайте, где используется onclick внутри блока, то это лишь для того, чтобы показать, как оно должно работать вживую!

  3. Пример удаление элемента по его "id" через javascript.

    Следующий вариант удаления элемента по его "id" через javascript.

    <div id="is_div_2">здесь текст и блок &lt;div id=&quot;div&quot;&gt;

    И стили:

    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 id="div">

    И стили:

    div#div {

    border: 1px solid red;

    padding: 20px;

    margin: 20px 0;

    }

  4. Удаление элемента нажав по нему через "id".

    Для удаления элемента нажав по нему "id" не нужен!

    Для этого нам понадобится:

    Блок - div.

    Метод - onclick.

    Свойство - outerHTML.

    И - this

    Чтобы мы могли его увидеть и понять, что именно это наш блок, добавим ему border

    И чтобы мы увидели, что навели мышку на него, добавим cursor pointer

    Теперь всё это нам нужно собрать:

    Html:
    <div onclick="this.outerHTML='';" style="border:1px solid red;cursor: pointer">Нажми на меня</div>
    Результат:
    Нажми на меня


Вас может еще заинтересовать список тем : #JS | #JS_ID |
Последняя дата редактирования : 10.01.2021 23:01
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.