人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

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


●質問者: wanikun
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

こんな感じで。

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/


wanikunさんのコメント
ありがとうございます。<br>たしかに必要なかったです。 $(document)、.on、$(this.parentNode)のメソッドは初めて知りました。 これから調べて勉強してみます。ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ