웹 페이지에서 특정 텍스트를 제거하려면 jQuery의 remove() 메서드를 활용하면 됩니다. 여기에 filter()를 함께 사용하면 요소 태그 내부에 포함되지 않은 콘텐츠, 즉 텍스트 노드만 정확하게 골라낼 수 있습니다.
문제 상황
예를 들어 다음과 같은 HTML 코드가 있다고 가정해 보겠습니다.
<div><h1>Demo Program</h1></div> This is also Demo Program
위 코드에서 <div> 태그 안에 있는 "Demo Program"은 그대로 유지하고, 태그 바깥에 있는 "This is also Demo Program"이라는 텍스트를 제거해야 합니다. 이 텍스트는 어떤 요소 태그에도 감싸져 있지 않은 일반 텍스트 노드이기 때문입니다.
이럴 때 filter()와 remove()를 조합한 전체 코드는 다음과 같습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div><h1>Demo Program</h1></div>
This is also Demo Program
<script>
$('body').contents().filter(function(){
return this.nodeType != 1;
}).remove();
</script>
</body>
</html>코드 설명
핵심 로직을 살펴보면 다음과 같습니다.
$('body').contents()는 <body> 태그의 모든 자식 노드(요소 노드와 텍스트 노드 모두)를 가져옵니다. 이후 filter(function(){ return this.nodeType != 1; })에서 nodeType이 1이 아닌 노드, 즉 요소 노드가 아닌 노드(텍스트 노드 등)만 필터링합니다. 마지막으로 remove()를 호출해 해당 노드들을 DOM에서 완전히 삭제합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html" 또는 "index.html"로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다.
출력 결과
프로그램을 실행하면 다음과 같은 결과가 화면에 나타납니다.
결과적으로 <div> 태그 내부의 "Demo Program" 제목만 남고, 태그 밖에 있던 "This is also Demo Program" 텍스트는 페이지에서 사라진 것을 확인할 수 있습니다.