[jQuery] 15. parent(), children(), find() 사용법

지난 글에서는 jQuery의 remove(), empty()를 사용해서 HTML 요소를 삭제하거나 내부 내용을 비우는 방법을 알아봤습니다.

이번 글에서는 선택한 요소를 기준으로 부모 요소, 자식 요소, 하위 요소를 찾을 때 사용하는 parent(), children(), find()에 대해 알아보겠습니다.

이 메서드들은 HTML 구조 안에서 원하는 요소를 정확하게 찾을 때 자주 사용됩니다. 특히 버튼을 클릭했을 때 그 버튼이 들어 있는 카드, 목록, 박스 안의 특정 요소만 바꾸고 싶을 때 유용합니다.

1. parent(), children(), find()란?

HTML은 부모와 자식 구조로 이루어져 있습니다.

예를 들어 div 안에 p 태그와 button 태그가 있다면 div는 부모 요소이고, p와 button은 자식 요소입니다.

parent() : 선택한 요소의 바로 위 부모 요소를 찾습니다.
children() : 선택한 요소의 바로 아래 자식 요소를 찾습니다.
find() : 선택한 요소 안쪽에 있는 모든 하위 요소 중 원하는 요소를 찾습니다.

$(this).parent();
$("#box").children();
$("#box").find(".text");

2. HTML 부모와 자식 구조 이해하기

먼저 HTML 구조를 간단하게 살펴보겠습니다.

📌 HTML 구조

<div class="card">
  <h3>카드 제목</h3>
  <p>카드 내용</p>
  <button>버튼</button>
</div>

위 코드에서 div.card는 h3, p, button을 감싸고 있습니다.

div.card는 부모 요소입니다.
h3, p, button은 div.card의 자식 요소입니다.
button에서 parent()를 사용하면 div.card를 찾을 수 있습니다.
div.card에서 children()을 사용하면 h3, p, button을 찾을 수 있습니다.

3. parent() 기본 사용법

parent()는 선택한 요소의 바로 위 부모 요소를 찾을 때 사용합니다.

📌 기본 문법

$("선택자").parent();

📌 예제 코드

<div class="box" style="padding:20px; background:#eeeeee;">
  <button id="btn">부모 색상 변경</button>
</div>

<script>
  $("#btn").click(function() {
    $(this).parent().css("background", "skyblue");
  });
</script>

📌 실행 결과

버튼을 클릭합니다.
버튼의 부모 요소인 div.box가 선택됩니다.
부모 박스의 배경색이 하늘색으로 변경됩니다.

4. parent()로 카드 전체 삭제하기

삭제 버튼을 눌렀을 때 버튼만 삭제되는 것이 아니라 카드 전체를 삭제하고 싶을 수 있습니다.

이럴 때 버튼을 기준으로 부모 요소를 찾아 remove()를 사용할 수 있습니다.

📌 예제 코드

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <p>삭제할 카드입니다.</p>
  <button class="deleteBtn">삭제</button>
</div>

<script>
  $(".deleteBtn").click(function() {
    $(this).parent(".card").remove();
  });
</script>

📌 실행 결과

삭제 버튼을 클릭합니다.
버튼의 부모 요소인 .card가 선택됩니다.
카드 전체가 화면에서 삭제됩니다.

5. children() 기본 사용법

children()은 선택한 요소의 바로 아래 자식 요소를 찾을 때 사용합니다.

📌 기본 문법

$("선택자").children();

📌 예제 코드

<div id="box" style="padding:20px; background:#eeeeee;">
  <p>첫 번째 문장</p>
  <p>두 번째 문장</p>
  <span>작은 글자</span>
</div>

<button id="btn">자식 요소 변경</button>

<script>
  $("#btn").click(function() {
    $("#box").children().css("color", "blue");
  });
</script>

📌 실행 결과

버튼을 클릭합니다.
id가 box인 div의 바로 아래 자식 요소들이 선택됩니다.
p 태그와 span 태그의 글자 색이 파란색으로 변경됩니다.

6. children()으로 특정 자식만 찾기

children() 안에 선택자를 넣으면 바로 아래 자식 중에서 원하는 요소만 찾을 수 있습니다.

📌 예제 코드

<div id="box">
  <p>첫 번째 p 태그</p>
  <p>두 번째 p 태그</p>
  <span>span 태그</span>
</div>

<button id="btn">p 태그만 변경</button>

<script>
  $("#btn").click(function() {
    $("#box").children("p").css("font-weight", "bold");
  });
</script>

📌 실행 결과

버튼을 클릭하면 box의 자식 중 p 태그만 선택됩니다.
p 태그 글자만 굵게 변경됩니다.
span 태그는 변경되지 않습니다.

7. find() 기본 사용법

find()는 선택한 요소 안쪽에서 원하는 하위 요소를 찾을 때 사용합니다.

children()이 바로 아래 자식만 찾는다면, find()는 더 깊이 들어간 하위 요소까지 찾을 수 있습니다.

📌 기본 문법

$("선택자").find("찾을 선택자");

📌 예제 코드

<div id="box">
  <div class="inner">
    <p class="text">안쪽 문장입니다.</p>
  </div>
</div>

<button id="btn">하위 요소 찾기</button>

<script>
  $("#btn").click(function() {
    $("#box").find(".text").css("color", "red");
  });
</script>

📌 실행 결과

버튼을 클릭합니다.
box 안쪽에 있는 class가 text인 요소를 찾습니다.
안쪽 문장의 글자 색이 빨간색으로 변경됩니다.

8. children()과 find()의 차이

children()과 find()는 둘 다 안쪽 요소를 찾지만 범위가 다릅니다.

메서드	찾는 범위	특징
children()	바로 아래 자식 요소	한 단계 아래만 찾음
find()	모든 하위 요소	안쪽 깊은 요소까지 찾음

📌 비교 코드

<div id="box">
  <p class="text">바로 아래 문장</p>

  <div>
    <p class="text">안쪽 문장</p>
  </div>
</div>

<script>
  $("#box").children(".text"); // 바로 아래 p만 찾음
  $("#box").find(".text");     // 안쪽 p까지 모두 찾음
</script>

9. 클릭한 카드 안의 제목만 변경하기

여러 카드가 있을 때 버튼을 누른 카드 안의 제목만 변경하고 싶을 수 있습니다.

이럴 때는 $(this), parent(), find()를 함께 사용할 수 있습니다.

📌 예제 코드

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <h3 class="title">첫 번째 카드</h3>
  <p>카드 내용입니다.</p>
  <button class="changeBtn">제목 변경</button>
</div>

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <h3 class="title">두 번째 카드</h3>
  <p>카드 내용입니다.</p>
  <button class="changeBtn">제목 변경</button>
</div>

<script>
  $(".changeBtn").click(function() {
    $(this).parent(".card").find(".title").text("선택한 카드입니다.");
  });
</script>

📌 실행 결과

첫 번째 카드의 버튼을 클릭하면 첫 번째 카드 제목만 변경됩니다.
두 번째 카드의 버튼을 클릭하면 두 번째 카드 제목만 변경됩니다.
다른 카드의 제목은 함께 변경되지 않습니다.

10. 클릭한 카드 안의 내용만 숨기기

find()를 사용하면 클릭한 카드 안쪽의 특정 요소만 찾아서 숨길 수 있습니다.

📌 예제 코드

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <h3>공지 1</h3>
  <p class="content">공지 내용 1입니다.</p>
  <button class="hideBtn">내용 숨기기</button>
</div>

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <h3>공지 2</h3>
  <p class="content">공지 내용 2입니다.</p>
  <button class="hideBtn">내용 숨기기</button>
</div>

<script>
  $(".hideBtn").click(function() {
    $(this).parent(".card").find(".content").hide();
  });
</script>

📌 실행 결과

공지 1 버튼을 클릭하면 공지 1 내용만 숨겨집니다.
공지 2 버튼을 클릭하면 공지 2 내용만 숨겨집니다.
클릭한 카드 내부에서만 요소를 찾기 때문에 다른 카드에 영향을 주지 않습니다.

11. closest()도 함께 알아두기

parent()는 바로 위 부모만 찾습니다.

하지만 HTML 구조가 깊어지면 바로 위 부모가 원하는 요소가 아닐 수 있습니다. 이럴 때는 closest()를 사용할 수 있습니다.

parent() : 바로 위 부모 요소를 찾습니다.
closest() : 현재 요소에서 가장 가까운 조건에 맞는 부모 요소를 찾습니다.

📌 예제 코드

<div class="card">
  <div class="card-body">
    <button class="deleteBtn">삭제</button>
  </div>
</div>

<script>
  $(".deleteBtn").click(function() {
    $(this).closest(".card").remove();
  });
</script>

위 코드에서는 버튼 바로 위 부모가 card-body입니다. 하지만 closest(".card")를 사용하면 가장 가까운 .card 요소를 찾아 삭제할 수 있습니다.

12. children()으로 메뉴 항목 스타일 변경하기

children()을 사용하면 특정 메뉴 영역 안의 바로 아래 항목만 제어할 수 있습니다.

📌 예제 코드

<ul id="menu">
  <li>홈</li>
  <li>게시판</li>
  <li>마이페이지</li>
</ul>

<button id="styleBtn">메뉴 강조</button>

<script>
  $("#styleBtn").click(function() {
    $("#menu").children("li").css({
      "background": "#eeeeee",
      "padding": "10px",
      "margin-bottom": "5px"
    });
  });
</script>

📌 실행 결과

버튼을 클릭하면 menu의 바로 아래 li 요소들이 선택됩니다.
각 메뉴 항목에 배경색과 여백이 적용됩니다.

13. 전체 예제

이번에는 카드 목록에서 클릭한 카드 안의 제목과 내용만 변경하고, 삭제까지 할 수 있는 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery parent children find</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    .card {
      padding: 15px;
      margin-bottom: 10px;
      background: #eeeeee;
      border-radius: 8px;
    }

    .active {
      background: royalblue;
      color: white;
    }
  </style>
</head>
<body>

  <h2>jQuery parent(), children(), find() 공부</h2>

  <div class="card">
    <h3 class="title">첫 번째 카드</h3>
    <p class="content">첫 번째 카드 내용입니다.</p>
    <button class="changeBtn">변경</button>
    <button class="deleteBtn">삭제</button>
  </div>

  <div class="card">
    <h3 class="title">두 번째 카드</h3>
    <p class="content">두 번째 카드 내용입니다.</p>
    <button class="changeBtn">변경</button>
    <button class="deleteBtn">삭제</button>
  </div>

  <script>
    $(function() {
      $(".changeBtn").click(function() {
        var card = $(this).parent(".card");

        card.addClass("active");
        card.find(".title").text("선택된 카드");
        card.find(".content").text("이 카드의 내용만 변경되었습니다.");
      });

      $(".deleteBtn").click(function() {
        $(this).parent(".card").remove();
      });
    });
  </script>

</body>
</html>

📌 실행 결과

첫 번째 카드의 변경 버튼을 클릭하면 첫 번째 카드만 변경됩니다.
두 번째 카드의 변경 버튼을 클릭하면 두 번째 카드만 변경됩니다.
삭제 버튼을 클릭하면 해당 버튼이 들어 있는 카드만 삭제됩니다.
parent()로 기준 카드를 찾고, find()로 카드 내부 요소를 찾습니다.

14. 자주 하는 실수

📌 1. parent()가 모든 부모를 찾는다고 생각하는 경우

parent()는 바로 위 부모 요소만 찾습니다.

$(this).parent();

더 위쪽의 특정 부모를 찾고 싶다면 closest()를 사용하는 것이 좋습니다.

$(this).closest(".card");

📌 2. children()으로 깊은 하위 요소를 찾으려는 경우

children()은 바로 아래 자식만 찾습니다. 안쪽 깊은 요소까지 찾으려면 find()를 사용합니다.

// 바로 아래 자식만 찾음
$("#box").children(".text");

// 안쪽 모든 하위 요소에서 찾음
$("#box").find(".text");

📌 3. 모든 카드의 제목이 한 번에 바뀌는 경우

전체 선택자를 바로 사용하면 모든 요소가 한꺼번에 변경될 수 있습니다.

// 모든 카드 제목이 바뀔 수 있음
$(".title").text("변경됨");

클릭한 카드 안의 제목만 바꾸려면 기준이 되는 부모를 먼저 찾고, 그 안에서 find()를 사용합니다.

$(this).parent(".card").find(".title").text("변경됨");

📌 4. 버튼만 삭제되는 경우

삭제 버튼에 바로 remove()를 사용하면 버튼만 삭제됩니다.

// 버튼만 삭제됨
$(this).remove();

// 버튼이 들어 있는 카드 삭제
$(this).parent(".card").remove();

📌 5. jQuery 연결을 빼먹는 경우

parent(), children(), find()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

15. 핵심 정리

parent()는 선택한 요소의 바로 위 부모 요소를 찾습니다.
children()은 선택한 요소의 바로 아래 자식 요소를 찾습니다.
find()는 선택한 요소 안쪽의 모든 하위 요소 중 원하는 요소를 찾습니다.
children()은 한 단계 아래만 찾고, find()는 더 깊은 요소까지 찾을 수 있습니다.
클릭한 버튼이 들어 있는 카드만 제어하려면 $(this).parent()를 사용할 수 있습니다.
클릭한 카드 안의 특정 요소만 바꾸려면 parent()와 find()를 함께 사용할 수 있습니다.
구조가 깊을 때 원하는 부모를 찾으려면 closest()도 함께 알아두면 좋습니다.
전체 선택자를 바로 쓰면 모든 요소가 바뀔 수 있으므로 기준 요소를 먼저 잡는 것이 중요합니다.

이번 글에서는 jQuery의 parent(), children(), find() 사용법에 대해 알아봤습니다.

이 메서드들은 HTML 구조 안에서 원하는 요소를 정확하게 찾기 위해 꼭 필요한 기능입니다. 특히 여러 개의 카드, 목록, 버튼이 있는 화면에서 클릭한 영역만 제어할 때 매우 유용합니다.

다음 글에서는 [jQuery] 16. siblings(), next(), prev() 사용법에 대해 알아보겠습

니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 17. form 이벤트 사용법 (0)	2026.06.28
[jQuery] 16. siblings(), next(), prev() 사용법 (0)	2026.06.28
[jQuery] 14. remove(), empty() 사용법 (0)	2026.06.25
[jQuery] 13. before(), after() 사용법 (0)	2026.06.22
[jQuery] 12. append(), prepend() 사용법 (1)	2026.06.21