필요없는 element 삭제하기

§

일단 ‘필요없는 element 가 왜 웹문서에 존재해?’

‘애초부터 필요없는 부분, (예를 들자면 댓글창) 을 만들어 붙이지 않으면 될꺼아냐?’

라고 생각하실 수 있는 분들이 계신데, 게시판 솔루션이나 워드프레스 같은 CMS 를 사용하는 경우, 내가 필요없어도 이런 것들이 달려 나옵니다.

그리고 국내 게시판 솔루션들과 달리 워드프레스의 경우, core 파일이나 본테마, 플러그인들은 절대 건드리지 않는 것이 불문율이라서 이런 필요없는 element 를 단순하게 삭제해 버릴 수 없는 경우가 발생합니다. 물론 그냥 뜯어 버려도 되죠. 하지만 업데이트는 어쩔? 워드프레스는 그누보드 처럼 10년이나 지나야 버전이 한번 바뀌는 솔루션이 아니거든요. 일년에도 몇번씩 업데이트가, 그것도 자동으로, 이뤄집니다.

워프 core 는 건드리면 망하는 겁니다.

암튼 이런경우 자스 (javascript) 로 필요없는 element 을 node 에서 삭제/제외시켜버릴 수 있습니다.

물론 자식테마를 쓰고 있다면 그 자식테마에서 필요없는 부분을 삭제시킬 수 있지만, 이 댓글창 하나 삭제하자고 comment.php 같은 파일을 자식테마에 붙여넣기가 참 그렇죠. (로딩속도 문제 때문에)

자스로 필요없는 element 를 삭제/제외시킬때 가장 유용하게 사용할 수 있는 API 는 Element.outerHTML 입니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

몇가지 예제들도 나와 있으니 살펴보시구요, element 를 삭제하는 예제는 나와있지 않지만, 다른 예제들을 살펴보시면 필요없는 element 는,

let element = document.getElementById("comment");
element.outerHTML = '';
delete element;

이런식으로 삭제할 수 있다는게 쉽게 유추되시겠죠? 아니면 약간의 꼼수로 이렇게 더 간단하게 작성하셔도 됩니다.

document.getElementById("comment").outerHTML='';

크로스 브라우징: 브라우져 지원은 IE4 에서도 지원될 정도로 매우 깊고 폭넓기 때문에 어떤 경우에도 안심하고 쓰셔도 됩니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리:

Ω

2 Comments

  • Estoque says:

    사람 심리가 고약한게 건드리지 말라고 하면 더 건드리고 싶어지는게 있죠

    왠지 하지 말라하면 더 하고 싶어지니 ‘마음껏 만지되 책임은 알아서’ 라고 하셔도 될듯합니다. ㅋㅋ

Leave a Reply

Your email address will not be published. Required fields are marked *