[JS] 웹의 모든 이미지 한번에 없애 버리기

출처 https://www.flickr.com/photos/133711122@N02/34158572061/sizes/m/

 

회사에서 업무하다가 가끔 기사를 읽고 싶을 때가 있다

그럴땐 기사를 몰래 보곤하는데 이미지가 나와서 당황스럽다

그래서 이미지를 없애버리고 싶단 생각을 하게 됨

 

$("img").remove();

 

이 코드만 쓰더라도 모든 img가 사라진다

 

하지만,

jQuery는 이미 로드된 DOM 요소를 대상으로 하기 때문에

동적으로 추가된 이미지 요소 또는 Shadow DOM 내부의 이미지 요소를 삭제하는 데

문제가 있을 수 있음

img를 remove해도 남아있음

 

이럴 땐

document.querySelectorAll('img').forEach(i => i.remove())

 

js로 바꿔서 써주면 된다... 한번에 날아가버리는 img들!

아래를 봐보자

js로 img 없애기

 

JavaScript의 querySelectorAll은 실제 DOM의 모든 요소를 순회하므로,

jQuery로 인식되지 않는 동적 요소나 특정 구조의 이미지까지 삭제할 수 있음

 

자! 이제 맘편히 기사 읽자!