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

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

<script>
jQuery(function(){
$('#hogeBtn1').click(function(){
var products = $(this);
products = $("#products").val();
var add_hoge= $(this);
add_hoge = $("#add_hoge").append("<div>"+products+"<span class=\"delete\">×</span></div><br>");

$('.delete').click(function(){
$('span').remove();
$('br').remove();
});
return false;
});
});
</script>

■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>

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/05/11 00:05:56
  • 終了:2015/05/11 08:33:02

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4504ベストアンサー獲得回数18702015/05/11 00:17:31

こんな感じで。

jQuery(function(){
    $('#hogeBtn1').click(function(){
        var products = $(this);
        products = $("#products").val();
        var add_hoge= $(this);
        // ★ <br> を消しました
        add_hoge = $("#add_hoge").append("<div>"+products+"<span class=\"delete\">×</span></div>");

        $('.delete').click(function(){
            // ★「×」の親の DIV を削除する
            $(this.parentNode).remove();
        });
        return false;
    });
});



jsFiddle で試してみたのがこちら。
https://jsfiddle.net/4bb7nfoc/

回答に書いたのは、質問のコードをなるべく残したんですが、#hogeBtn1 をクリックするたびに、.delete に削除処理をぶら下げるより、.on() を使って書いた方が良いと思う。
https://jsfiddle.net/yvagbz0d/1/

id:wanikun

ありがとうございます。
たしかに必要なかったです。
$(document)、.on、$(this.parentNode)のメソッドは初めて知りました。
これから調べて勉強してみます。ありがとうございました。

2015/05/11 08:32:54

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません