2

テキスト ボックスにテキストを入力し、ボタンをクリックすると、その下に項目が追加されるインタラクティブな To Do リストを作成しようとしています。これまでのところ、ボタンを使用してリストにアイテムを正常に追加できましたが、一度に 1 つのアイテムをクリックして削除することはできません。(理想的には、各アイテムの横にチェックボックスがあり、クリックするとアイテムが消えます)。これまでのところ、.remove() アクションを使用して、リスト内のすべてのアイテムをクリックして消すことしかできませんでした。私はいくつかの調査を行い、.on() アクションが必要なものかもしれないと考えました。試してみたところ、アイテムをまったく消すことができなくなりました。これは私のコードです:

$(document).ready(function() {
    $('#button').click(function() {
        var toAdd=$('input[name=checkListItem]').val();
        $('#item').append.('.list');
    });
    $(document).on('click','item',function() {
        $(this).remove();
    });
});

間違っていると目立つものはありますか?または、これについてもっと良い方法はありますか?私はこれが初めてで、すべてのフィードバックに感謝します。ありがとう!

4

1 に答える 1

1

私は修正されたコードであなたのフィドルをフォークしました: http://jsfiddle.net/XEDHJ/2/

お困りの箇所は以下のとおりです。

$('.list').on('click','input',function() {
    $(this).parent().remove();
});

を使用onするのは正しい考えでした。この状況に最適です。使用する方法onは、親 node、この場合は class の div list、および一致する数のdiv があることです。この場合、親ノードの下にchild nodesある任意の要素です。input子ノードは、2 番目の引数のセレクターによって示されます。これは、ページがレンダリングされた後に作成された場合でも、div の下の入力ノードと一致します。

入力をタグでラップしたため<div>、実際にはその親を削除したいと考えてい<div>ます。したがって、 を呼び出します$(this).parent().remove()

元の例を以下に残しましたが、これで十分です。


探しているのは次のようなものです。

フィドル

http://jsfiddle.net/Khesy/

JavaScript

$(document).ready(function() {
    $('#button').click(function() {
        $('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
    });
    $('#item').on('click','input',function() {
        $(this).parent().remove();
    });
});

HTML

<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>
于 2013-03-02T01:12:33.087 に答える