удаление каждого элемента при клике

@ГеоргийТ · Регистрация: 06.08.2018

Студворк — интернет-сервис помощи студентам

добрый вечер, помогите пожалуйста, например есть несколько <img> тегов, и как сделать так чтобы удаление при клике работало не только на первый из них, а на каждый

@Eskander88 · 10.04.2019, 21:35

JavaScript
1
2
3
4
5
6
document.onclick = function( e ) {
  var tag = e.target;
  if( tag.tagName == "IMG" ) {
    tag.remove();
  } 
}

@Пифагор · 10.04.2019, 21:41

На примере абзацев:

HTML5
1
2
3
4
5
<div id="div">
    <p>Абзац1</p>
    <p>Абзац2</p>
    <p>Абзац3</p>
</div>

JavaScript
1
2
3
4
5
var div = document.querySelector('#div');
 
div.addEventListener('click', e => {
    div.removeChild(e.target);
})

@ArtemBil · 10.04.2019, 21:46

HTML5
1
2
3
4
5
<div class="wrapper-photo__block">
<img src="https://mobimg.b-cdn.net/pic/v2/gallery/111x185/delfiny-pejzazh-zhivotnye-47284.jpg" alt="">
<img src="https://mobimg.b-cdn.net/pic/v2/gallery/111x185/oshki_oty_otiki-zhivotnye-47570.jpg" alt="">
<img src="https://mobimg.b-cdn.net/pic/v2/gallery/111x185/volki-zhivotnye-47321.jpg" alt="">
  </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var wrpPhoto = document.querySelector('.wrapper-photo__block');
var imgs = document.querySelectorAll('img');
/* Если не понял почему обработчик событий на обёртке,
то почитай что такое делегирование */
wrpPhoto.addEventListener('click', removeImg);
 
function removeImg (e) {
  for (var i = 0; i < imgs.length; i++) {
  if(e.target == imgs[i]) {
  event.target.remove();
    }
  }
}

https://codepen.io/anon/pen/KYWbmd?editors=1010
Как-то так, один из вариантов

@ГеоргийТ · 10.04.2019, 21:56 **[ТС]**

спасибо большое

Добавлено через 1 минуту
хотя немного не правильно, он удаляет последний элемент по клику, а надо чтобы удалял тот на который кликнули

@Eskander88 · 10.04.2019, 22:04

Сообщение от ГеоргийТ

хотя немного не правильно, он удаляет последний элемент по клику, а надо чтобы удалял тот на который кликнули

честно говоря так и есть.. удаляет именно тот элемент, по которому произведён клик. Можете html + js показать?
рабочий пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html lang="ru-RU">
<head><meta charset="UTF-8"></head>
<style type="text/css">
img { display: block;
      width: 50px; height: 50px;
      border: 1px solid red; }
</style>
<body>
  <img src="1.png" alt="1">
  <img src="2.png" alt="2">
  <img src="3.png" alt="3">
  <img src="4.png" alt="4">
  <img src="5.png" alt="5">
<script type="text/javascript">
document.onclick = function( e ) {
  var tag = e.target;
  if( tag.tagName == "IMG" ) {
    tag.remove();
} }
</script> 
</body>
</html>

@ГеоргийТ · 10.04.2019, 22:46 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
<body>
    <div id="start">
    <p id="points"></p>
    <img id="apple" src="img/apple.png" />
    </div>
    
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/game.js"></script>
    </body>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.onclick = function( e ) {  
  var tag = e.target;
  if( tag.tagName == "IMG" ) {
    tag.remove();
  }
}
/*
* ГЕНЕРАЦИЯ img 
*/
setInterval(function(){
    var elem = document.getElementById("start");
    var photo = document.createElement("img");
    photo.id = "apple";
    photo.src = "img/apple.png";
    elem.appendChild(photo);
}, 3000);

@Eskander88 · 10.04.2019, 23:06

у меня ваш код работает: удаляется то изображение, на котором совершён клик.
Для наглядности добавил счётчик смотрите html код страницы:

HTML5
1
2
3
4
5
6
7
8
<!DOCTYPE HTML>
<html lang="ru-RU">
<head><meta charset="UTF-8"></head>
<style type="text/css">
img { display: block;  width: 50px; height: 50px;  border: 1px solid red; }
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.onclick = function( e ) {  
  var tag = e.target;
  if( tag.tagName == "IMG" ) {
    tag.remove();
  }
}
/*
* ГЕНЕРАЦИЯ img 
*/
var counter = "0"
setInterval(function(){
    var elem = document.getElementById("start");
    var photo = document.createElement("img");
    photo.id = "apple";
    photo.alt = ++counter;
    photo.src = "img/apple.png";
    elem.appendChild(photo);
}, 1000)

HTML5
1
2
3
4
5
6
7
8
</script> 
<body>
  <div id="start">
    <p id="points"></p>
    <img id="apple" src="img/apple.png" alt="0"/>
  </div>
  </body
</html>

Проверено: Firefox, Chrome, Edge

Добавлено через 5 минут
Создайте каталог, в него поместите html файл из трёх вышеприведённых фрагментов. Без дополнительных манипуляций откройте получившийся файл в html-браузере.

@ГеоргийТ · 10.04.2019, 23:16 **[ТС]**

(((все равно удаляет последний(

@Пифагор · 10.04.2019, 23:19

ГеоргийТ, не может код Eskander88, как и мой, удалять последний элемент, если по нему не кликают...
https://jsfiddle.net/p4nku5bL/

@Eskander88 · 10.04.2019, 23:22

ГеоргийТ, вероятно Вы просто упускаете из виду мелкую деталь.. такое часто бывает в процессе работы с кодом.. присмотритесь внимательнее..

@ГеоргийТ · 10.04.2019, 23:25 **[ТС]**

может, я остановил даже генерацию, и вставил 2 одинаковых тега , нажал на первый, он удалил последний, вставил 3 тега, кликнул на 1 удалил последний

@Eskander88 · 10.04.2019, 23:27

вот это уже интереснее.. каким образом вы остановили счётчик? ... через инструменты отладки?

и как вставили элементы: программно или тоже через инструменты-разработки?

@ГеоргийТ · 10.04.2019, 23:35 **[ТС]**

изначально в индексном файле был один тег, потом на js я сделал генерацию по таймеру, и код каторый предложили выше должен был якобы удалять тот элемент каторый был кликнут, а на самом деле удаляет последний элемент этого тега, я думал это из за генерации, остановил его попробовал без него, все равно не работает, удаляет последний элемент(((

@Eskander88 · 10.04.2019, 23:41

как я понимаю, вы пробуете перенести примеры в уже готовый проект.. однако технически мы не знаем, что у вас там в целом творится.. вероятно есть какие-то вспомогательные функции, которые накладываются и изменяют ожидаемое поведение программы..

Вы пробовали создать файл как указано в этом посте удаление каждого элемента при клике ? Попробуйте создать html файл и посмотрите на рабочий пример. Опираясь от этого, уже ищите фрагмент кода в своём проекте, который вносит аномалию.

Пифагор, показал вам пример в песочнице.. если у вас стандартный интерпетатор js, то согласно правилам синтаксиса приведённые примеры будут удалять только тот элемент, который получил событие "клик".. либо в файле есть другой код, который переопределяет поведение программы

@ГеоргийТ · 11.04.2019, 00:19 **[ТС]**

хахахахахахахаххахахахахаха, вот же тупоголовый, я угараю с себя, ведь как можно было определить что код удаляет только тот элемент который кликнут если они на вид одинаковые были????ХД , а то что я говорил удаляет последний, это была иллюзия что удаляется последний элемент, потому как когда удалялся кликнутый, оставшийся смещался на его место соответственно, прошу прощения у всех

@Eskander88 · 11.04.2019, 00:37

бывает

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

удаление каждого элемента при клике

Решение

Решение

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212

	удаление каждого элемента при клике 10.04.2019, 21:13. Показов 18876. Ответов 16 Метки нет (Все метки) добрый вечер, помогите пожалуйста, например есть несколько <img> тегов, и как сделать так чтобы удаление при клике работало не только на первый из них, а на каждый 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	10.04.2019, 21:56 [ТС]
	спасибо большое Добавлено через 1 минуту хотя немного не правильно, он удаляет последний элемент по клику, а надо чтобы удалял тот на который кликнули 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	10.04.2019, 23:16 [ТС]
	(((все равно удаляет последний( 0

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	10.04.2019, 23:19
	ГеоргийТ, не может код Eskander88, как и мой, удалять последний элемент, если по нему не кликают... https://jsfiddle.net/p4nku5bL/ 1

@Eskander88 12 / 18 / 2 Регистрация: 02.11.2015 Сообщений: 222
	10.04.2019, 23:22
	ГеоргийТ, вероятно Вы просто упускаете из виду мелкую деталь.. такое часто бывает в процессе работы с кодом.. присмотритесь внимательнее.. 1

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	10.04.2019, 23:25 [ТС]
	может, я остановил даже генерацию, и вставил 2 одинаковых тега , нажал на первый, он удалил последний, вставил 3 тега, кликнул на 1 удалил последний 0

@Eskander88 12 / 18 / 2 Регистрация: 02.11.2015 Сообщений: 222
	10.04.2019, 23:27
	вот это уже интереснее.. каким образом вы остановили счётчик? ... через инструменты отладки? и как вставили элементы: программно или тоже через инструменты-разработки? 1

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	10.04.2019, 23:35 [ТС]
	изначально в индексном файле был один тег, потом на js я сделал генерацию по таймеру, и код каторый предложили выше должен был якобы удалять тот элемент каторый был кликнут, а на самом деле удаляет последний элемент этого тега, я думал это из за генерации, остановил его попробовал без него, все равно не работает, удаляет последний элемент((( 0

@Eskander88 12 / 18 / 2 Регистрация: 02.11.2015 Сообщений: 222
	10.04.2019, 23:41
	как я понимаю, вы пробуете перенести примеры в уже готовый проект.. однако технически мы не знаем, что у вас там в целом творится.. вероятно есть какие-то вспомогательные функции, которые накладываются и изменяют ожидаемое поведение программы.. Вы пробовали создать файл как указано в этом посте удаление каждого элемента при клике ? Попробуйте создать html файл и посмотрите на рабочий пример. Опираясь от этого, уже ищите фрагмент кода в своём проекте, который вносит аномалию. Пифагор, показал вам пример в песочнице.. если у вас стандартный интерпетатор js, то согласно правилам синтаксиса приведённые примеры будут удалять только тот элемент, который получил событие "клик".. либо в файле есть другой код, который переопределяет поведение программы 1

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	11.04.2019, 00:19 [ТС]
	хахахахахахахаххахахахахаха, вот же тупоголовый, я угараю с себя, ведь как можно было определить что код удаляет только тот элемент который кликнут если они на вид одинаковые были????ХД , а то что я говорил удаляет последний, это была иллюзия что удаляется последний элемент, потому как когда удалялся кликнутый, оставшийся смещался на его место соответственно, прошу прощения у всех 0

@Eskander88 12 / 18 / 2 Регистрация: 02.11.2015 Сообщений: 222
	11.04.2019, 00:37
	бывает 0