jqueryで現在の行を削除する方法

jQuery は、Web フロントエンド開発で広く使用されている JavaScript ライブラリで、使いやすく、強力で、クロスブラウザー互換性があります。 jQuery を使用すると、複雑なインタラクティブ効果を簡単に実装し、ページ コンテンツを動的に更新し、ページのインタラクティブ性を高めることができます。その中でもカレント行の削除は開発においてよく使われる一般的な機能ですが、それを実現するためのjQueryの使い方がわからない方のために、この記事ではjQueryを使ってカレント行を削除する方法を紹介します。

1. jQuery セレクター

現在の行を削除する前に、jQuery セレクターについて理解する必要があります。 jQueryセレクターはCSSセレクターに似た構文で、タグ名、クラス名、IDなどでDOM要素を選択できます。

一般的に使用される jQuery セレクターには次のものがあります:

1. タグ セレクター: $("タグ名")、例: $("p") はすべての p ラベルを選択することを意味します。
2. クラス セレクター: $(".class name") (例: $(".demo") は、クラス デモを持つすべての要素を選択することを意味します。
3. ID セレクター: $("#ID name") (例: $("#demo") は、デモの ID を持つ要素を選択することを意味します。
4. 属性セレクター: $("[属性名]") (例: $("[href]")) は、href 属性を含むすべての要素を選択することを意味します。
5. 複合セレクター: 上記のセレクターを組み合わせて複数条件フィルター処理に使用できます。たとえば、 $("ul li.active") は、クラスがアクティブなすべての li タグを選択することを意味します。

2. 現在の行コード実装の削除

jQuery セレクターの基礎を使用して、現在の行を削除できます。まず、HTMLでテーブルを設定し、削除ボタンのclass属性値を「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 は Web 開発をより簡単かつ効率的にすると同時に、Web ページの対話性とユーザー エクスペリエンスを強化します。この記事が初心者の方のお役に立てれば幸いです。

以上がjqueryで現在の行を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。