

以下のようなコードを作っているのですが、「消す」の部分がうまく機能しません。

[code]

    <form method="post" name="insert" action="" enctype="multipart/form-data">
        <ul>
            <li><input type="text" placeholder="タイトル" name="title" style="width:400px;height:20px;margin-bottom:10px;" value="<?php echo $_POST[" title"]; ?>"></li>
            <li>画像のアップロード<br><input type="file" name="top_img"></li>
            <li><input type="text" placeholder="導入部分" name="intro" style="width:400px;height:20px;margin-bottom:10px;" value="<?php echo $_POST[" intro"]; ?>"></li>
            <li><input type="text" placeholder="句点（、）区切りでタグの記入" name="tags" style="width:400px;height:20px;margin-bottom:10px;" value="<?php echo $_POST[" tags"]; ?>"></li>
            <ul id="ul">
                <li class="button"><a id="title" style="margin:10px;">タイトル</a></li>
                <li class="button"><a id="img" style="margin:10px;">画像</a></li>
                <li class="button"><a id="text" style="margin:10px;">テキスト</a></li>
            </ul>
            <li><input type="submit" value="送信"></li>
        </ul>
    </form>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
    
        var num = 1;
    
        $(function () {
            $("#title").click(function () {
                $("#ul").append('<li id="' + String(num) + '"><input name="text_title' + String(num) + '" type="text" placeholder="タイトル" style="width:400px;height:20px;margin-bottom:10px;"></li><li id="' + String(num) + '"><a id="' + String(num) + '" style="margin:10px;">消す</a></li>');
                num++;
            });
            $("#img").click(function () {
                $("#ul").append('<li id="' + String(num) + '"><input type="text" name="img' + String(num) + '" placeholder="画像のURL" style="width:400px;height:20px;margin-bottom:10px;"></li>');
                num++;
            });
            $("#text").click(function () {
                $("#ul").append('<li id="' + String(num) + '"><textarea name="text_html' + String(num) + '" placeholder="内容" style="width:400px;height:300px;"></textarea></li>');
                num++;
            });
    
            $("#" + String(num)).click(function () {
                $("#" + String(num)).remove();
                num--;
    
            });
        });
    </script>
    
[/code]

詳しい方、ご教示下さい。宜しくお願い致します。


CC BY-SA 3.0
2015-12-22T07:09:42.550
20284
2015-12-23T08:25:37.803
2015-12-22T09:01:43.413
8619
question
javascript
javascriptのremove


インデント無いのと、せっかくの`jQuery`なのでコード成形をしましょう  
見づらいので見落としも発生しているのかもしれません  
とりあえず本題

例えば、ここの部分を

[code]

     $("#ul").append('<li id="' + String(num) + '"><input name="text_title' + String(num) + '" type="text" placeholder="タイトル" style="width:400px;height:20px;margin-bottom:10px;"></li><li id="' + String(num) + '"><a id="' + String(num) + '" style="margin:10px;">消す</a></li>');
    
[/code]

こうすれば分かりますか？

[code]

    $("#ul").append(
        $("<li>").attr("id",String(num)).append(//←数値のID、1個目
            $("<input>").attr({
                "name":'text_title' + String(num),
                "type":'test',
                "placeholder":'タイトル'
            }).css({
                "width":'400px',
                "height":'20px',
                "margin-bottom":'10px'
            })
        )
    ).append(
        $("<li>").attr("id",String(num)).append(//←数値のID、2個目
            $("<a>").attr("id",String(num)).css({"margin":'10px'}).html("消す")//←数値のID、3個目
        )
    );
    
[/code]

同じIDのエレメントを複数作ってるのが原因じゃないですか?  
また、IDを数値のみなのはやめた方が良いかと思います。  
纏めて消したいならクラスをつけるか、セレクタを工夫しましょう

* * *

**追記**  
ザックリ今の構造のままでやりたいっぽいことを読み取って直しました。  
ただ、私が作るとしたら現在の数などは持たず  
下記のように全体をラッパーで囲いボタンに`this`などで自身を渡し親要素を探して削除します。  
`function(e){e.parentNode;}`のような感じで受けてやればエレメントを操作できます。

[code]

    <li>
        <div>
            <input type="text" value="タイトル" />
            <button onclick="remove_func(this)">消す</button>
        </div>
    </li>
    
[/code]

また、クラス名とか付けておけば現在のエレメントの数を取得するのも容易です。  
下記に記載したサンプルですと、それぞれの要素の数がほしいのであれば、  
全体：`add_li`  
タイトル：`item_title`  
画像：`item_img`  
詳細：`item_txt`  
など  
クラス名でセレクタを取ってやれば`length`で個数が取れます。

[code]

    var num = 1;
    
    $(function () {
      $("#title").click(function () {
        $("#ul").append(
            $("<li>").addClass("add_li item_title item"+String(num)).append(
                $("<input>").attr({
                    "name":'text_title' + String(num),
                    "type":'test',
                    "placeholder":'タイトル'
                }).css({
                    "width":'400px',
                    "height":'20px',
                    "margin-bottom":'10px'
                })
            )
        ).append(
            $("<li>").addClass("add_li item"+String(num)).append(
                $("<a>").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(
            $("<li>").addClass("add_li item_img item"+String(num)).append(
                $("<input>").attr({
                    "name":'img' + String(num),
                    "type":'test',
                    "placeholder":'画像のURL'
                }).css({
                    "width":'400px',
                    "height":'20px',
                    "margin-bottom":'10px'
                })
            )
        ).append(
            $("<li>").addClass("add_li item"+String(num)).append(
                $("<a>").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(
            $("<li>").addClass("add_li item_txt item"+String(num)).append(
                $("<input>").attr({
                    "name":'text_html' + String(num),
                    "type":'test',
                    "placeholder":'内容'
                }).css({
                    "width":'400px',
                    "height":'300px'
                })
            )
        ).append(
            $("<li>").addClass("add_li item"+String(num)).append(
                $("<a>").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<work;n++){
        var next=(n+1);
        $(".rm_btn"+next).removeClass("rm_btn"+next).addClass("rm_btn"+n).attr("onclick","remove_item("+n+")");
        $(".item"+next).removeClass("item"+next).addClass("item"+n);
      }
      num = ($(".add_li").length / 2) + 1;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form method="post" name="insert" action="" enctype="multipart/form-data">
        <ul>
            <li><input type="text" placeholder="タイトル" name="title" style="width:400px;height:20px;margin-bottom:10px;" value="タイトル"></li>
            <li>画像のアップロード<br><input type="file" name="top_img"></li>
            <li><input type="text" placeholder="導入部分" name="intro" style="width:400px;height:20px;margin-bottom:10px;" value="イントロ"></li>
            <li><input type="text" placeholder="句点（、）区切りでタグの記入" name="tags" style="width:400px;height:20px;margin-bottom:10px;" value="タグ"></li>
            <ul id="ul">
                <li class="button"><a id="title" style="margin:10px;">タイトル</a></li>
                <li class="button"><a id="img" style="margin:10px;">画像</a></li>
                <li class="button"><a id="text" style="margin:10px;">テキスト</a></li>
            </ul>
            <li><input type="submit" value="送信"></li>
        </ul>
    </form>
[/code]


CC BY-SA 3.0
2015-12-22T08:49:47.410
20289
2015-12-23T08:25:37.803
2015-12-23T08:25:37.803
20284
answer