wanikun回答ポイントなし

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>

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

ログインして回答する

ベストアンサー

a-kuma32015/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/
スター
- 1件のコメントを見る
- wanikun 2015/05/11 08:32:54
  
  ありがとうございます。
  たしかに必要なかったです。
  $(document)、.on、$(this.parentNode)のメソッドは初めて知りました。
  これから調べて勉強してみます。ありがとうございました。
  
  スター

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

ベストアンサー

a-kuma32015/05/11 00:17:31

wanikun 2015/05/11 08:32:54

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版