<jQuery> empty(), remove()의 차이점 및 활용 방안

각자 싱글페이지를 구현하다 보면 거의 특정부분의 데이터를 지우고 다시 새로 불러온 내용으로 불러오기 위해 기존에 있던 내용들을 지워야 할 떄가 있을 것이다. 

 

1.remove() : 선택한 노드 까지 삭제

2.empty() : 선택한 노드의 자식들을 삭제 

 

라고 볼 수 있겠는데 각자 필요한 부분에 따라 사용하면 되겠다.

 

   $(".rec-Button").click(function(){
	      $(".box").remove();  // box-wrap 클래스안에 있는 box 클래스들을 지워준다
	      getRecList();
	   });
   
   function getRecList(){
      $.ajax({
           type: "get",
           url : "/camp/reclist",
           async:"true",
           success : function(recommend) {
              console.log(recommend.reclist);
              for(var i=0; i<recommend.reclist.length; i++){
                 var rec = recommend.reclist[i];
                 $(".box-wrap").append(` // 내가 붙여주고 싶었던 부분
            <div class="box">
                  <img src="/images/${rec.img1 }" class="rec-img">
               <div class="name-sec">
                  <span class="rec-name"><i class="fas fa-map-signs">&nbsp;&nbsp;${rec.name }</i></span>
               </div>
               <div class="address-sec">
                  <span class="rec-address"> ${rec.address } </span>
               </div>
            </div>
   `);
                 
              };
           }
      })
   };

 

실제로 내가 프로젝트에 썻던 부분인데 처음에 box-wrap 클래스 안의 자식들을 지우고 반복시켜주려 했는데 방법을 몰라서 직접 자식(box 클래스)를 선택해서 지워주고 다시 append 를 해주고 있다. 

 

반대로 empty() 를 쓰게 된다면

   $(".rec-Button").click(function(){
	      $(".box-wrap").empty(); // 여기 안에 내용들 다 지우고 싶다!! 자식 찾기 귀찮다!!
	      getRecList();
	   });
   
   function getRecList(){
      $.ajax({
           type: "get",
           url : "/camp/reclist",
           async:"true",
           success : function(recommend) {
              console.log(recommend.reclist);
              for(var i=0; i<recommend.reclist.length; i++){
                 var rec = recommend.reclist[i];
                 $(".box-wrap").append(`
            <div class="box">
                  <img src="/images/${rec.img1 }" class="rec-img">
               <div class="name-sec">
                  <span class="rec-name"><i class="fas fa-map-signs">&nbsp;&nbsp;${rec.name }</i></span>
               </div>
               <div class="address-sec">
                  <span class="rec-address"> ${rec.address } </span>
               </div>
            </div>
   `);
                 
              };
           }
      })
   };

 처럼 사용할 수 있겠다.

 

 

간단한 정리!!

1. remove() 는 선택한 노드'까지' 삭제~

2. empty() 는 선택한 노드의 '자식들'만 삭제~

3. 개인적으로 empty()를 선호한다 두번쨰 코드만 봐도 하나의 노드를 선택하고 삭제, 추가 를 반복해주기 때문에 가독성과 나중에 코드를 보며 복습을 할 때도 헷갈릴 일이 없을 것 같다.