• 회원가입
  • 로그인

[HTML_CSS] JQ - remove() / empty() 메서드 - (요소제거 / 내용삭제 / 내용비우기) ※ 리무브, 엠프티

공부할 메서드.

 

remove() 메서드 

: "선택요소 및 그 자식 요소"를 제거. 

※ 즉, 요소 자체를 삭제.

 

empty()

: 선택요소에서 "자식 요소"를 제거. 

※ 즉, 요소 안 내용만 삭제.

 

 

remove() 예제 - "선택요소 및 그 자식요소" 제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").remove();

    });

});

</script>

  

<style>

  #hz { 

    height:100px;

    width:300px;

    padding:10px;

    color:#f70542;

    border:5px solid #f70542;

    background-color:#fff8f8;

  }

  </style>


<div id="hz" >

  홈짱닷컴

  <p>Homzzang.com</p>

  <p>HTML, CSS, JS</p>

</div><br>

 

<button>요소 자체를 제거</button>


결과 보기

 

empty() 예제 - 선택요소에서 "자식요소" 제거.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").empty();

    });

});

</script>

  

<style>

  #hz { 

    height:100px;

    width:300px;

    padding:10px;

    color:#f70542;

    border:5px solid #f70542;

    background-color:#fff8f8;

  }

  </style>

</head>

<body>


<div id="hz" >

  홈짱닷컴

  <p>Homzzang.com</p>

  <p>HTML, CSS, JS</p>

</div><br>

 

<button>요소 내용을 삭제</button>


결과 보기

 

필터링 :  특정 클래스 갖은 요소만 제거.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").remove(".subject, .intro"); 

    });

});

</script>

  

<style>

#hz { 

    height:150px;

    width:300px;

    padding:10px;

    color:#f70542;

    border:5px solid #f70542;

    background-color:#fff8f8;

}

</style>

 

<div id="hz" >

  홈짱닷컴

  <p>Homzzang.com</p>

  <p class="subject">HTML, CSS, JS</p>

  <p class="intro">웹제작 무료 학습 사이트</p>

</div><br>


<button>요소 내용을 삭제</button>


결과 보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012