jQueryで要素の追加と削除について

すみません、jQueryを勉強していますが、最終手段で質問させて頂きます。
キーワードを追加して削除するだけのものを作りたいのです。
input textから「ほげほげ」と入力して、ボタンを押したら以下のように追加されます。
ほげほげ[×]
そこから〔×〕をクリックしたらその追加したキーワードだけを削除したいのですが、どうしても入力したテキストが「全部削除」されてしまいます。
作ったスクリプトは下記ですが、「for」文などを使わないといけないのでしょうか？

■HTML部分
<input title="タイトル" type="search" name="products" id="products" value="" />
<input type="button" value="追加" class="add_btn" id="hogeBtn1">

<div id="add_hoge"> 〜ここにキーワードが追加される。 <div>ほげほげ<span class="delete">×</span></div> </div>

はてなポイントが無くてすみませんがお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

こんばんは。なんか寝付けなかったんで回答書いてみます。

lang
1$(function () {
2    $(document).on('click', '.delete', function() {
3        var me = $(this),
4            kw = me.closest('div');
5        kw.remove();
6    });
7    $('#hogeBtn1').click(function () {
8        var products = $('#products').val();
9        $("#add_hoge").append("<div>" + products + "<span class=\"delete\">×</span></div>");
10        return false;
11    });
12});

$('.delete') と書くと、ドキュメント内の delete class属性を持つすべてのものを指します。$('span') も $('br') も同様です。全部消えてしまうのはこのせいですね。
なので、次のどちらかを行います。
2-1. 追加した要素にだけ通用する clickイベントハンドラを記載する。
2-2. 文書内の .delete class属性要素に共通なロジックを別に記載しておいてそちらで集中管理。

今回は、.delete をクリックしたら行うことはみんな同じなので、後者の実装がよりシンプルですね。2-2を採用します。
$(document).on メソッドで、実装してきます。
3. .delete のspan要素から見て、消したいキーワードはすぐ一つ上の親のdiv要素です。これを知るには
closest('div') が簡単。(ほかにも指定する方法はあります) で、これをremoveすれば OKですね。

以上です。おやすみなさい。

投稿2015/05/10 16:48

okayu3

総合スコア200

wanikun

2015/05/10 23:28

質問者です。ありがとうございました。説明も書いてくれてわかりやすかったです。まだ初心者の本を見ての開発だったので.onと.closestについてはこれから調べてみます。ありがとうございました。

行動規範の内容に同意します

こんな感じじゃないでしょうか。

lang
1jQuery(function(){
2    $('#hogeBtn1').click(function(){
3        var products = $("#products").val();
4        $("#add_hoge").append(
5            // 入力値から "<div>"+products+"</div>" のように HTML を構築するのは悪手
6            // .text() を使うほうが良い
7            $('<div></div>')
8                .text(products)
9                .append("<span class=\"delete\">×</span>")
10        );
11        $("#products").val("");
12    });
13
14    // 要素を追加するたびに click イベントハンドラを仕込むのではなく .on() を活用
15    $(document).on('click', '.delete', function(){
16        // 削除する要素はイベントのターゲットから parent で辿る
17        $(this).parent().remove();
18    });
19});