Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【vte.cx入門】7.登録したデータを削除する:jQuery実践編

More than 5 years have passed since last update.

データ登録していくと、時に登録したデータが不要になってしまったり、間違ったデータを登録してしまうことがあります。その時はそのデータを削除し、整理していきましょう。

ここではjQueryを利用したデータの削除方法を記します。

1.削除するデータを準備する。

サーバから削除したいデータを取得してください。

仮に以下のデータとします。

{"feed" : {
    "entry" : [
        {
          "userinfo" : {
              "id" : 1234,
              "email" : "hoge@foo.com"
          },
          "favorite" : {
              "food" : "みかん",
              "music" : "J-POP"
          },
          "author" : [{"uri" : "urn:vte.cx:created:21"}],
          "id" : "/11/0-8-2-9-1-1-1,3",
          "link" : [{"___href" : "/11/0-8-2-9-1-1-1","___rel" : "self"}],
          "published" : "2015-12-01T13:44:46.067+09:00",
          "updated" : "2015-12-01T13:44:46.067+09:00"
        }
    ]
}}

削除はlink項目のrel="self"とid項目を使用します。

以下の二つをajax通信の際に使用します。

"link" : [{"___href" : "/11/0-8-2-9-1-1-1","___rel" : "self"}],
"id" : "/11/0-8-2-9-1-1-1,3",

2.ajaxで登録データを削除する(DELETEリクエスト)

上記データをjQueryのajax通信を使用し、DELETEリクエストを実行します。

javascript
$.ajax({
    url: '/d/11/0-8-2-9-1-1-1?r=/11/0-8-2-9-1-1-1,3',
    method: 'delete'
}).done(function(res) {
    alert('削除成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
    alert('削除失敗');
});

上記の削除データからlink rel="self"とidの値をコピーし、URLパラメータに入力します。

■リクエスト

param
url 削除先URL?r={id}
method DELETE

?rパラメータで一件削除を行う

削除を実行する場合は「?r」パラメータを使用します。
値にはidの値をそのまま入力してください。

/d/11/0-8-2-9-1-1-1?r=/11/0-8-2-9-1-1-1,3
// {link項目のrel="self"のhref属性}?r={id項目の値}

?rパラメータでの削除はリビジョン管理で行っている

データの更新時にもリビジョン管理が出てきましたが、削除でも同じようにリビジョン管理を行っています。

「?r」パラメータに入力したid項目のリビジョン番号がサーバーと一致していないとエラーとなります。

?rパラメータを省略して一件削除を行う

「?r」を省略して削除も行えます。
その場合、idの指定は必要なく、以下のURLで削除が実行できます。

javascript
$.ajax({
    url: '/d/11/0-8-2-9-1-1-1',
    method: 'delete'
}).done(function(res) {
    alert('削除成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
    alert('削除失敗');
});

この場合、楽観的排他処理は行われずに、強制的に削除することができます。

■レスポンス

成功ステータス

ステータス メッセージ レスポンス
200 OK {"feed" : {"title" : "Deleted."}}

このレスポンスが返って来れば、正しく削除ができたということになります。
サーバからデータを取得してステータスコード204が返却されれば成功です。

削除確認例
/d/11/0-8-2-9-1-1-1?e     ←    ステータスコード:204であれば削除成功

失敗ステータス

以下の仕様書の下部に細かく記載されています。ステータスコードに沿って正しいデータを登録してみてください。
HTTPステータス一覧

また、ステータス:409が返ってきた時はデータの更新と対応は変わりません。参照してみてください。

削除データの配下に子供がいる場合は削除できません

例えばサーバのデータが以下のようになっている場合、hogeを削除できません。

/d
  /hoge  ←  削除したいデータ
    /foo      ←  hogeの配下に登録されているデータ
    /bar      ←        〃

この状態で「/hoge」を削除しようとした場合、以下のようなレスポンスが返却されます。

ステータス:400 Bad Request
{"feed" : {"title" : "Can't delete for the child entries exist. Check URI : /@{サービス}/hoge Key : /hoge"}}

この場合は、「/hoge/foo」と「/hoge/bar」を削除してから「/hoge」を削除しなければなりませんのでご注意ください。

データの一括削除

上記のように「/d/hoge」を削除したいのに、配下にデータが登録されていて、削除できないことがあります。
そうした場合は、一括削除して「/hoge」配下をクリーンしましょう。

?fパラメータで一括削除を行う

以下のように行います。

javascript
$.ajax({
    url: '/d/hoge?f',
    method: 'delete'
}).done(function(res) {
    alert('一括削除成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
    alert('一括削除失敗');
});

■リクエスト

param
url 削除先URL?f
method DELETE

一括削除の場合はリビジョン管理を行わない

更新や一件削除の際はリビジョンが一致していなければ実行できませんでしたが、一括削除の場合は、強制的に削除を実行します。
ですので、中には「削除したくないデータも存在するのに削除してしまう」ケースも発生する可能性があります。
実行する際は細心の注意を払ってください。

■レスポンス

成功ステータス

ステータス メッセージ レスポンス
200 OK {"feed" : {"title" : "Deleted."}}

失敗ステータス

以下の仕様書の下部に細かく記載されています。
HTTPステータス一覧

削除データの配下に子供がいる場合は「?f」による削除できません

一件削除と同じように配下に子供がいると「?f」による一括削除ができません。
「?f」の場合の子供は以下のような場合です。

/d
  /hoge      ←  /hoge?fを実行
    /foo      ←  一括削除したいデータ
    /bar      ←        〃
        /bar1      ←  bar配下に登録されているデータ
        /bar2      ←        〃

「/hoge?f」で/hoge配下を一括削除したいのに、「/hoge/bar」の配下に「/hoge/bar/bar1」が存在すると「?f」での一括削除は失敗してしまいます。

もし、「/hoge」配下のデータはどんなデータが残ってようと全件削除したい場合は、以下の「?_rf」を実行してください。

?_rfパラメータで一括削除を行う

「?f」とは違い、対象の配下にあるデータを子供も含めて削除します。
「?f」の時のように/bar配下に子供がいても関係なく全件削除します。
以下のように行います。

javascript
$.ajax({
    url: '/d/hoge?_rf',
    method: 'delete'
}).done(function(res) {
    alert('全件削除成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
    alert('全件削除失敗');
});

■リクエスト

param
url 削除先URL?_rf
method DELETE

削除データの配下に子供がいても関係なく全件削除します。

/d
  /hoge      ←  /hoge?_rfを実行
    /foo      ←  削除される
    /bar      ←  削除される
        /bar1      ←  削除される
        /bar2      ←  削除される

「?f」と同様に「削除したくないデータも存在するのに削除してしまう」ケースも発生する可能性がありまので、実行する際は細心の注意を払ってください。

■レスポンス

成功ステータス

ステータス メッセージ レスポンス
200 OK {"feed" : {"title" : "Deleted."}}

失敗ステータス

以下の仕様書の下部に細かく記載されています。ステータスコードに沿って正しいデータを登録してみてください。
HTTPステータス一覧

終わりに

以上で削除についての説明を終わります。
削除でも一件削除については、リビジョン管理が発生します。データの更新を理解していると、よりスムーズに削除についても理解できるかも知れません。

次回は参照の応用編にあたる、ページネーションの実装について説明したいと思います。

takeyama
AngularJS始めたばかりの初心者です
http://reflexworks.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away