javascriptのremove
以下のようなコードを作っているのですが、「消す」の部分がうまく機能しません。
<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>
詳しい方、ご教示下さい。宜しくお願い致します。