ajaxで作成した削除ボタンで対応したフォームを削除したい

Question

ajaxで処理が成功時に
img画像の表示とテキストフォームの作成をして
res.imgという返り値でカスタム属性data-imgidを割り当てています

success: function(imageData, status, xhr) {
                            var res = {};
                            try {
                                res = $.parseJSON(xhr.responseText);
                            }catch (e) {}
                            $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" / >");
                            $('<input>').attr({
                                type: 'textarea',
                                name: "body["+res.img_id+"]",
                                value: res.img_id,
                                "data-imgid": res.img_id
                            }).appendTo("#image-files div");
                            $('<input>').attr({
                                id:"deleteBtn",
                                type: "button",
                                name: res.img_id,
                                value: res.img_id+"削除",
                            }).appendTo("#image-files div");
                        },

削除ボタンが押された時に
そのres.imgに対応したimg画像表示とテキストフォームの削除を行いたいのですが
どう作成したら削除できるのか回答をもらって調べて見ても全くわからずどうすれば
削除できるかを教えていただきたいです。

        $('body').on('click', '#deleteBtn', function(evt) {
            alert("test");
        });

削除ボタンを押されたらアラートだ出るところまではできているのですが

どうすればres.imgを判別して
そのres.imgに対応したimg画像表示とテキストフォームの削除
できますでしょうか？

追記
全体としてやりたいことは
formを
ファイルを選択し、選択されたファイルのプレビューとテキストフォームをajaxで作成
投稿ボタンをクリックされたらajaxで作成したformデータを
送信するという仕様です。

なのであくまで今回は質問の
res.imgに対応したimg画像表示とテキストフォームの削除
をどのようにしたら実装できるかという解決策が欲しいです。

<section>
    <?php echo Form::open(array('action'=>'', 'enctype' => 'multipart/form-data',"id" => "form1")) ?>
    <div class="container clearfix">
        <div class="row">
            <div class="col-md-12">
                <p>画像ファイルを選択してください（複数可)</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
				<span class="fileUpload btn btn-default">
					ファイルを選択
					<input type="file" class="uploadFile" accept="image/*" multiple/>
				</span>

            </div>
            <div class="col-xs-4" id="progress-container"></div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-12" id="image-files">
                <ul class="list-inline list-unstyled"></ul>
                <div class="body"></div>
            </div>
        </div>
        <tr>
            <th colspan="2" class="btn_th"><input type="submit" class="submit" id="submitBtn" value="投稿"/></th>
        </tr>
    </div>

    <?php echo Form::close() ?>
</section>

Answer 1

data-*で共通の数字を与えて、それを元にセレクタで検索して.remove()するのが最も簡単にできるでしょう。
textareaにはすでにdata-imgidというのを与えているわけですから、画像（と、削除ボタン自身にも。削除ボタンも消すはずですよね？）にも同じものを与えましょう。
ただ、deleteBtnはidではなくクラスにしてください。同じidは、ドキュメント内に1個しか存在してはいけません。

success: function(imageData, status, xhr) {
                            var res = {};
                            try {
                                res = $.parseJSON(xhr.responseText);
                            }catch (e) {}
                            $("#image-files ul").append("<img class='imgView' src=\"" + res.img + "\" data-imgid=\"" + res.img_id + "\"/ >");
                            $('<input>').attr({
                                type: 'textarea',
                                name: "body["+res.img_id+"]",
                                value: res.img_id,
                                "data-imgid": res.img_id
                            }).appendTo("#image-files div");
                            $('<input>').attr({
                                "class" : "deleteBtn",
                                type: "button",
                                name: res.img_id,
                                value: res.img_id+"削除",
                                "data-imgid": res.img_id
                            }).appendTo("#image-files div");
                        },


	$('body').on('click', '.deleteBtn', function(evt) {
		var id = $(this).attr("data-imgid");
		$("[data-imgid=" + id + "]").remove();
		//alert("test");
	});

Comments

[amaguri]

回答ありがとうございます、試して見ます！

Answer 2

img 要素を動的に追加したり削除したりするより、静的にページに配置しておいて、当該 img 要素の style 属性を "display:none;" または "display:inline;" に設定することにより表示/非常時を切り替えた方が簡単だと思いますが、そういう方法ではダメなんですか？

Comments

[amaguri]

回答ありがとうとうございます、今回ajaxで作成したフォームは表示しないという状態の場合、見えなくなっているフォームのデータは送信されなくなるのでしょうか？？その場合ならそれでいいのですが、、送信されてしますのなら今回の実装の遣りたいこととしてはダメです。。

[退会済みユーザー]

> 今回ajaxで作成したフォームは表示しないという状態の場合、見えなくなっているフォームのデータは送信されなくなるのでしょうか？？

意味が理解できません。

jQuery ajax の success に設定したコールバックで画像とその画像の削除ボタンを表示し、削除ボタンをクリックすると画像と削除ボタンを消すのだと理解していますが、それであればデータ送信云々は関係ないと思うのですが。

画像と削除ボタンを jQuery UI の Dialog を使って表示すれば、自力で style 属性を "display:none;" に設定しなくても済むので、それを使う手もあります。

[amaguri]

情報がなく追記させていただきます
実際にやりたかったことはajaxで作ったデータをさらに
formで送信するプログラムを書いていました。

ただ今回質問した内容が期待する回答で解決するのであれば不要な質問であると思い省略していました。