티스토리 뷰

Programming/JQUERY

JQUERY 값 내용 없애기

Beat. 2016. 9. 6. 09:25

안녕하세요 오늘은 JQUERY 값 내용을 없애는 법을 알아보겠습니다.


div를 이용해서 값을 없애는 법을 보여드리겠습니다.


<body>안에 복사붙여넣기 하시고 바로실행 해주세요.


<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    //내용만 삭제합니다.
    $('#test1').empty();
    
    //div를 삭제합니다.
    $('#test2').remove();
});
</script>
<div style="border: 1px solid">1-1번입니다.</div>
<div style="border: 1px solid; height: 20px;" id="test1">2-1번입니다.</div>
<div style="border: 1px solid">3-1번입니다.</div>
 
<div style="border: 1px solid">1-2번입니다.</div>
<div style="border: 1px solid" id="test2">2-2번입니다.</div>
<div style="border: 1px solid">3-2번입니다.</div>


<body>안에 복사붙여넣기 하시고 바로실행 해주세요.


값을 없애는 법도 간단합니다.


$('#id').empty();

$('#id').remove();


두가지 인데요.




사진을 보시면 이해하시기 편할겁니다.


1-1과 3-1은 empty()를 사용한 모습입니다.


div는 남아 있고 안의 내용만 없어진 모습입니다.


1-2와 3-2는 remove()를 사용한 모습입니다.


div태그 자체가 없어진 모습입니다.


차이를 아셨나요?


empty()는 div태그는 남아 있고 내용만 삭제

remove()는 div태그 자체를 삭제


간단하죠?


생각보다 쓸곳이 많습니다.


empty() remove() 한번 테스트 해보세요~


이상 JQUERY 값 내용 없애기 방법을 알아보았습니다.








'Programming > JQUERY' 카테고리의 다른 글

JQUERY 엔터키를 사용해 포커스 이동하기  (0) 2016.09.12
JQUERY 라디오버튼 값 가져오기  (0) 2016.09.07
JQUERY 강제 클릭 이벤트  (0) 2016.09.05
JQUERY 테이블 행 추가 삭제 하기  (0) 2016.09.03
공유하기 링크
댓글