jQueryのremove()が効かない

Question

jQueryを使用して、ToDoリストを作っています。
削除ボタンを押すと追加したリストを削除できるようにしたいのですが、上手くいきません。

html

<div class="container">
  <h1>ToDoリスト</h1>
  <input type="text" id="input">
  <button id="add">追加</button>
  <ul class="lists">
  </ul>
</div>

scss

.container{
	margin: auto;
	width: 500px;
	padding-top: 10px;
}

.lists{
	border: 1px solid gray;
	margin-top: 15px;
	
	li{
		padding: .2em;
		
		button{
			margin-left: 10px;
		}
	}
}

javascript

$('#add').on('click', (function () {
    var input = $('#input').val();

    if (input.length) {
      $('.lists').append('<li>' + input + '<button id="remove">削除</button>' + '</li>');

      $('.lists').css('padding', '10px');
    }

    $('#remove').click(function () {
      $(this).parent().remove();
    })

    if ($('.lists').has('li')) {} else {
      $('.lists').css('padding', '0px');
    }

    $('#input').val('');
  }))

appendでliの後ろに要素を追加するようにしているのですが、何故かprependで追加するようにするとremove()がしっかり機能します。これの原因も分かりません。

#removeが全て取得できていないのかと思い、each()文を利用して下記の記述にしてみたのですが、これもダメでした。

$('#remove').each(function () {
  $(this).click(function () {
    $(this).parent().remove();
  })
})

原因を教えて頂けると幸いです。
宜しくお願い致します。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

そもそもですが、HTMLの構成上同じidを設定することはできません。
現在のロジックだと追加ボタンを押すたびに<button id="remove">削除</button>が作成され、クリックイベントを設定しようとしても本来1つしかないはずのidが複数あるので処理が動かなくなります。
複数表出させる要素に対してはclassにするか、remove-1のように異なるid名を入れるようにするべきだと思います。

    if (input.length) {
      $('.lists').append('<li>' + input + '<button class="remove">削除</button>' + '</li>');

      $('.lists').css('padding', '10px');
    }

...

    $('.remove').click(function () {
      $(this).parent().remove();
    })

Answer 2

idはHTMLで重複してはいけないので、id="remove"という要素を増やし続けると正しく動作しません。

Comments

[maisumakun]

「#removeが全て取得できていない」とありますが、そもそも複数ある事自体が間違いです。

[nyoro]

めちゃくちゃ初歩的なミスでした。。無事動くようになりました。ありがとうございます。。