jQueryフロントデスクの削除

jQuery は、フロントエンド Web 開発で広く使用されている JavaScript ライブラリであり、これを使用して対話性を強化することで、ユーザー エクスペリエンス全体がより深く、より効果的になります。

この記事では、jQuery フロントエンドの削除に焦点を当てます。削除はフロントエンド開発プロセスにおいて避けられない部分です。データの追加、削除、変更、クエリ操作では、通常、バックエンドとのデータ対話が必要です。ただし、jQuery フロントエンド削除を使用すると、バックエンドとのデータ対話の必要性がなくなり、ページ操作プロセスが簡素化されます。

フォアグラウンドの削除は、静的データの削除と動的データの削除の 2 つの状況に分けられます。以下に分けて紹介します。

1. 静的データの削除

いわゆる静的データとは、HTML テキストや画像など、ページが読み込まれたときにすでに存在するデータを指します。静的データの削除は、指定された要素を削除できる jQuery のremove() メソッドを通じて実行できます。

たとえば、各行に削除ボタンがあるリストを作成します。リスト項目全体を削除するには、「削除」ボタンをクリックします。 HTML コードは次のとおりです。

<ul>
  <li>列表项1 <button class="remove">删除</button></li>
  <li>列表项2 <button class="remove">删除</button></li>
  <li>列表项3 <button class="remove">删除</button></li>
  <li>列表项4 <button class="remove">删除</button></li>
</ul>

次に、jQuery セレクターを使用して削除する要素を見つけ、クリック イベントを削除ボタンにバインドする必要があります。

$(document).ready(function(){
  $('.remove').click(function(){
    $(this).parent().remove();
  });
});

上記のコードでは、$(document).ready() はページがロードされたことを示し、$('.remove') は、そのクラス名を選択することですべての削除ボタンが見つかることを示します。ボタン。次に、parent() メソッドを呼び出してボタンが配置されているリスト項目を取得し、remove() メソッドを使用してリスト項目を削除します。

2. 動的データの削除

動的データとは、ページ上の JavaScript とバックエンド データの対話を通じて取得されたデータを指します。動的データを削除する場合は、AJAX 経由でサーバーにリクエストを送信して、どのデータを削除するかをサーバーに指示する必要があります。削除が成功した後、ページ上のデータの表示を更新します。

HTML 構造は次のとおりです:

<div class="list-container">
  <ul id="data-list">
    <li>动态数据1 <button class="remove" data-id="1">删除</button></li>
    <li>动态数据2 <button class="remove" data-id="2">删除</button></li>
    <li>动态数据3 <button class="remove" data-id="3">删除</button></li>
    <li>动态数据4 <button class="remove" data-id="4">删除</button></li>
  </ul>
</div>

上記の HTML コードでは、削除時の識別を容易にするために、データの各行の ID 値を表す data-id を設定します。

以下では、jQuery を使用して AJAX リクエストをサーバーに送信し、指定されたデータを削除し、ページを更新します。

$(document).ready(function(){
  $('.remove').click(function(){
    var id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: '/delete.php',
      data: {id: id},
      success: function(data){
        if (data.success) {
          $('#data-list li[data-id="'+id+'"]').remove();
        }
      }
    });
  });
});

上記のコードでは、$(this).data('id') は現在のボタンの data-id 値を取得することを意味し、$.ajax() メソッドは AJAX リクエストを送信することを意味します。削除成功コールバック関数内で jQuery セレクターを使用して、削除する要素を選択し、削除します。

概要

この記事では、フロントエンド操作を通じてバックエンドとのデータ対話を保存できる jQuery フロントエンド削除について紹介します。静的データの削除は、remove() メソッドを使用して実行できますが、動的データを削除するには、AJAX を介してサーバーにリクエストを送信し、ページを更新する必要があります。 jQuery フロントエンド削除を使用することで、操作プロセス全体がよりシンプル、高速、スムーズになり、ユーザーに優れたエクスペリエンスを提供できます。

以上がjQueryフロントデスクの削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。