[jQuery] 요소 내용 삭제/비우기

Front-End/jQuery

[jQuery] 요소 내용 삭제/비우기 - remove(), empty()

리딩리드 2017. 1. 4. 17:33

요소 내용 삭제/비우기 - remove(), empty()

1. remove()

- 페이지 안의 요소를 삭제 한다

- 변경 전

- 변경 후

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #hat{ width:100px; background-color : aquamarine; } ul{ border: 1px solid black; width:100px; height:100px; list-style: none; padding:0; margin:0; } li{ border-bottom-style: dotted; } </style> </head> <div id="hat"> hat </div> <ul > <li>shirt</li> <li>pants</li> </ul> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#hat').remove(); }); </script>

2. empty()

- 요소 삭제가 아닌 요소 안의 내용이 삭제된다

- 변경 전

- 변경 후

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #hat{ width:100px; height:50px; background-color : aquamarine; } ul{ border: 1px solid black; width:100px; height:100px; list-style: none; padding:0; margin:0; } li{ border-bottom-style: dotted; } </style> </head> <div id="hat"> hat </div> <ul > <li>shirt</li> <li>pants</li> </ul> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#hat').empty(); }); </script>