jquery에서 현재 행을 삭제하는 방법

jQuery는 웹 프런트엔드 개발에 널리 사용되는 JavaScript 라이브러리로, 사용하기 쉽고 강력하며 브라우저 간 호환됩니다. jQuery를 사용하면 복잡한 대화형 효과를 쉽게 구현하고, 페이지 콘텐츠를 동적으로 업데이트하고, 페이지 상호작용성을 높일 수 있습니다. 그 중 현재 행을 삭제하는 것은 개발 시 일반적으로 사용되는 일반적인 기능입니다. jQuery를 사용하여 이를 수행하는 방법을 모르는 경우 이 기사에서는 jQuery를 사용하여 현재 행을 삭제하는 방법을 소개합니다.

1. jQuery 선택기

현재 행을 삭제하기 전에 먼저 jQuery 선택기를 이해해야 합니다. jQuery 선택기는 태그 이름, 클래스 이름, ID 등으로 DOM 요소를 선택할 수 있는 CSS 선택기와 유사한 구문입니다.

일반적으로 사용되는 jQuery 선택기에는 다음이 포함됩니다.

1. 태그 선택기: $("태그 이름"), 예: $("p")는 모든 p 태그를 선택한다는 의미입니다.
2. 클래스 선택기: $(".class name"), 예: $(".demo")는 클래스 데모로 모든 요소를 ​​선택한다는 의미입니다.
3. ID 선택기: $("#ID 이름"), 예: $("#demo")는 ID가 데모인 요소를 선택하는 것을 의미합니다.
4. 속성 선택기: $("[속성 이름]"), 예: $("[href]")는 href 속성을 포함하는 모든 요소를 ​​선택한다는 의미입니다.
5. 복합 선택기: 다음과 같이 다중 조건 필터링을 위해 위 선택기를 혼합하여 사용할 수 있습니다. $("ul li.active")는 활성 클래스가 있는 모든 li 태그를 선택한다는 의미입니다.

2. 현재 행 삭제 코드 구현

jQuery 선택기를 기반으로 현재 행을 삭제할 수 있습니다. 먼저 HTML로 테이블을 설정하고 삭제 버튼의 클래스 속성 값을 "delete-btn"으로 설정해야 합니다. 코드는 다음과 같습니다.

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>小明</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>小红</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>小刚</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

HTML로 설정한 후 삭제 기능을 구현하려면 JavaScript로 jQuery 코드를 작성해야 합니다. 구체적인 코드는 다음과 같습니다.

<script>
$(function() {
  $(".delete-btn").on("click", function() {
    $(this).parents("tr").remove();
  });
});
</script>

위 코드에서 $() 함수는 "delete-btn" 클래스가 있는 모든 버튼 요소를 찾아 버튼을 클릭할 때 해당 요소에 클릭 이벤트 리스너를 추가하는 것을 의미합니다. 요소 tr이 DOM 구조에서 제거되었습니다. 이렇게 하면 현재 행을 쉽게 삭제할 수 있습니다.

3. 요약

위의 구현 코드를 통해 jQuery를 사용하여 현재 행을 삭제하는 것이 매우 간단하다는 것을 알 수 있습니다. jQuery 선택기와 이벤트 수신 메커니즘만 이해하면 됩니다. 전반적으로 jQuery는 웹 개발을 더 쉽고 효율적으로 만드는 동시에 웹 페이지의 상호 작용성과 사용자 경험을 향상시킵니다. 이 글이 초보자들에게 도움이 되었으면 좋겠습니다.

위 내용은 jquery에서 현재 행을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!