javascript - 複雑な jquery 関数を設定するにはどうすればよいですか?

Question

私はhtmlとjqueryコードを持っています。li要素の最初の子を削除できulます。問題は、一度しか削除できず、要素を 1 つしか削除できないことです。ユーザーがボタンをクリックするたびに要素を削除できるようにしたい。

制限はしたくありません。またはどのように制限を設定できますか?

ここに私のマークアップがあります:

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

jQueryを使用したJavaScript：

$(document).ready(function(){
    $("button").click(function(){
        $("ul li:first").hide();
    });
});

score 0 · Accepted Answer

削除したいと言った場合は、次のように remove を使用できます。

 $(document).ready(function(){
        $("button").click(function(){
            $("ul li:first-child").remove();
        });
    });

score 0 · Accepted Answer

これが起こっている理由は、hide()

要素に隠れるだけで、まだそこにあります。したがって、リストの最初のものを参照すると、すでに非表示になっているものを hide() しようとします。

あなたの意図は、最初のものを削除してから、もう一度機能を実行すると、次のものを削除することだと思います。

試すremove()

要素を削除します。

そう

$("button").click(function (){ $("ul li:first").remove(); }

score 0 · Accepted Answer

まず、:firstセレクタは最初に一致した要素を選択します。親の最初の子であるすべての要素を選択するもの
を探しています。これが、hide() と組み合わせると、一度しか機能しない理由です。 :first-child Selector

次に、hide()は CSS に相当します。削除する"display", "none"
たびに新しい最初の子を参照したい場合は、remove()を試してみてください。
これにより、子が DOM から完全に削除され、コードが最新の li 要素を参照できるようになります。

リスト 2:

$(document).ready(function(){
    $("button").click(function(){
        $("ul li:first-child").remove();
    });
});

6 に答える 6