すみません、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>
はてなポイントが無くてすみませんがお願い致します。
No.1
4973
2154
こんな感じで。
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
0
1
2
ありがとうございます。
2015/05/11 08:32:54たしかに必要なかったです。
$(document)、.on、$(this.parentNode)のメソッドは初めて知りました。
これから調べて勉強してみます。ありがとうございました。