Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Удаление элемента с помощью removeChild (https://javascript.ru/forum/misc/78113-udalenie-ehlementa-s-pomoshhyu-removechild.html)

crabkilla 28.07.2019 23:38

Удаление элемента с помощью removeChild
 
По заданию необходимо написать код для удаления второй узел img со страницы. Тот, который не отображается.
<!DOCTYPE html>
  <head>
    
  </head>
  <body>
    <p style="color: navy"> There's only picture here...
     <br>
     <img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
    </p>
    <br>
    <p id = "pic"> This one cannot be displayed. We have to delete it.
     <img alt="bad picture">
    </p>
    
    <script type="text/javascript">

    </script>
  </body>
</html>


При выполнении столкнулся с ошибкой несовпадения типов нода, не могу никак с этим разобраться, поэтому нужна помощь со всем этим

ksa 29.07.2019 08:11

Цитата:

Сообщение от crabkilla
не могу никак с этим разобраться

Хоть бы показал как разбирался...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p style="color: navy"> There's only picture here...
	<br>
	<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
</p>
<br>
<p id = "pic"> This one cannot be displayed. We have to delete it.
	<img alt="bad picture">
</p>
<script type='text/javascript'>
	var o=document.getElementsByTagName('img')[1];
	o.parentNode.removeChild(o);
</script>
</body>
</html>

Malleys 29.07.2019 09:37

Цитата:

Сообщение от crabkilla
не могу никак с этим разобраться

Картинка не загрузилась в том случае, если нет доступа к сети, сервер не вернул картинку, адрес картинки не указан... Как вариант, можно после загрузки ресурсов перебрать все картинки и удалить те, у которых ширина равна 0. (Ведь минимальная картинка имеет размеры 1×1)

Вариант №1 Одноразовое удаление ломанных картинок после загрузки...
<!DOCTYPE html>

<head></head>

<body>
	<p style="color: navy"> There's only picture here...
		<br>
		<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
	</p>
	<br>
	<p id="pic"> This one cannot be displayed. We have to delete it.
		<img alt="bad picture">
	</p>

	<script>
		addEventListener("load", function() {
			for(const image of document.images) {
				if(image.naturalWidth === 0) {
					image.remove();
				}
			}
		});
	</script>
</body>

</html>


Вариант №2 Живое удаление ломанных картинок ...
<!DOCTYPE html>

<head></head>

<body>
	<script>
		const observer = new MutationObserver(mutationRecords => {
			for(const mutationRecord of mutationRecords) {
				if(mutationRecord.type === "childList") {
					for(const node of mutationRecord.addedNodes) {
						if(node instanceof HTMLImageElement) {
							if(!node.hasAttribute("src"))
								node.remove();
							else
								node.addEventListener("error", ()=> node.remove());
						}
					}
				}
			}
		});
		observer.observe(document.body, { childList: true, subtree: true });
	</script>
	<p style="color: navy"> There's only picture here...
		<br>
		<img src="http://ipic.su/img/img7/fs/burger.1537205489.jpg" width="100px" height="100px" />
	</p>
	<br>
	<p id="pic"> This one cannot be displayed. We have to delete it.
		<img alt="bad picture">
	</p>
</body>

</html>


Цитата:

Сообщение от ksa
windows-1251

Зачем в каждом вашем примере пропаганда этой проблемной кодировки?

Цитата:

Сообщение от ksa
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->

Зачем в каждом сообщении скрытая реклама определённых инструментов, не относящихся к теме?

Цитата:

Сообщение от ksa
type='text/css'

Цитата:

Сообщение от ksa
type='text/javascript'

В браузерах работает только один язык стилей и скриптов, и согласно спецификации это не обязательно указывать в каждом вашем сообщении!

Цитата:

Сообщение от ksa
<script type='text/javascript'>
</script>

Так собственно говоря зачем это тут, если вы потом ниже пишете скрипт?

Цитата:

Сообщение от ksa
document.getElementsByTagName('img')[1];

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

ksa 29.07.2019 12:30

Malleys, отстань от меня... :D

ksa 29.07.2019 12:32

Цитата:

Сообщение от Malleys
А почему вы решили, что ломанные картинки будут всегда встречаться после первой картинки?

Читай внимательно.
Цитата:

Сообщение от crabkilla
По заданию необходимо написать код для удаления второй узел img со страницы. Тот, который не отображается.

Так будет понятно? ;)


Часовой пояс GMT +3, время: 06:43.