質問: 以下のようなコードを作っているのですが、「消す」の部分がうまく機能しません。 ``` "> 画像のアップロード "> "> タイトル 画像 テキスト ``` 詳しい方、ご教示下さい。宜しくお願い致します。
回答: インデント無いのと、せっかくの`jQuery`なのでコード成形をしましょう 見づらいので見落としも発生しているのかもしれません とりあえず本題 例えば、ここの部分を ``` $("#ul").append('消す'); ``` こうすれば分かりますか? ``` $("#ul").append( $("").attr("id",String(num)).append(//←数値のID、1個目 $("").attr({ "name":'text_title' + String(num), "type":'test', "placeholder":'タイトル' }).css({ "width":'400px', "height":'20px', "margin-bottom":'10px' }) ) ).append( $("").attr("id",String(num)).append(//←数値のID、2個目 $("").attr("id",String(num)).css({"margin":'10px'}).html("消す")//←数値のID、3個目 ) ); ``` 同じIDのエレメントを複数作ってるのが原因じゃないですか? また、IDを数値のみなのはやめた方が良いかと思います。 纏めて消したいならクラスをつけるか、セレクタを工夫しましょう **追記** ザックリ今の構造のままでやりたいっぽいことを読み取って直しました。 ただ、私が作るとしたら現在の数などは持たず 下記のように全体をラッパーで囲いボタンに`this`などで自身を渡し親要素を探して削除します。 `function(e){e.parentNode;}`のような感じで受けてやればエレメントを操作できます。 ``` 消す ``` また、クラス名とか付けておけば現在のエレメントの数を取得するのも容易です。 下記に記載したサンプルですと、それぞれの要素の数がほしいのであれば、 全体:`add_li` タイトル:`item_title` 画像:`item_img` 詳細:`item_txt` など クラス名でセレクタを取ってやれば`length`で個数が取れます。 ``` var num = 1; $(function () { $("#title").click(function () { $("#ul").append( $("").addClass("add_li item_title item"+String(num)).append( $("").attr({ "name":'text_title' + String(num), "type":'test', "placeholder":'タイトル' }).css({ "width":'400px', "height":'20px', "margin-bottom":'10px' }) ) ).append( $("").addClass("add_li item"+String(num)).append( $("").addClass("rm_btn"+String(num)).attr("onclick","remove_item("+String(num)+")").css({"margin":'10px'}).html("消す") ) ); num = ($(".add_li").length / 2) + 1; }); $("#img").click(function () { $("#ul").append( $("").addClass("add_li item_img item"+String(num)).append( $("").attr({ "name":'img' + String(num), "type":'test', "placeholder":'画像のURL' }).css({ "width":'400px', "height":'20px', "margin-bottom":'10px' }) ) ).append( $("").addClass("add_li item"+String(num)).append( $("").addClass("rm_btn"+String(num)).attr("onclick","remove_item("+String(num)+")").css({"margin":'10px'}).html("消す") ) ); num = ($(".add_li").length / 2) + 1; }); $("#text").click(function () { $("#ul").append( $("").addClass("add_li item_txt item"+String(num)).append( $("").attr({ "name":'text_html' + String(num), "type":'test', "placeholder":'内容' }).css({ "width":'400px', "height":'300px' }) ) ).append( $("").addClass("add_li item"+String(num)).append( $("").addClass("rm_btn"+String(num)).attr("onclick","remove_item("+String(num)+")").css({"margin":'10px'}).html("消す") ) ); num = ($(".add_li").length / 2) + 1; }); }); function remove_item(target){ //現在の追加リストの数をキープ var work = num; //要素を削除 $(".item"+target).remove(); //付けられているクラス名を整理 for(var n=target;n 画像のアップロード タイトル 画像 テキスト ```