JavaScriptを使用して追加されたリスト項目を削除するにはどうすればよいですか?

HTML では、開発者は「ul」タグを使用して項目のリストを作成できます。すべての関連項目を 1 つのリストに追加できます。 JavaScript を使用してリスト項目を管理することもできます。

場合によっては、開発者は JavaScript を使用してリスト項目を追加または削除する必要があります。特定の属性値を使用してリスト項目にアクセスし、removechild() メソッドを使用してリスト項目を削除できます。

このチュートリアルでは、ユーザーからの入力を受け取り、その値に基づいてリスト項目を削除します。

＃＃＃文法＃＃＃

ユーザーは JavaScript を使用して、次の構文に従って追加されたリスト項目を削除できます。 リーリー

上記の構文では、id を使用してリスト項目にアクセスします。その後、removechild() メソッドを使用して、選択したリスト項目をリストから削除します。

例 1 (リストからの動的要素の削除)

以下の例では、「car」に等しい ID を持つリストを作成します。さらに、ユーザーからリスト項目の値を取得するための入力ボックスを作成しました。さらに、ユーザーが対応するボタンをクリックしたときに addCar() 関数とremoveCar() 関数を呼び出す、車の追加ボタンと車の削除ボタンを作成しました。

JavaScript では、リストおよびテキストの入力値にアクセスします。 addCar() 関数では、まずリスト項目を作成し、次にリスト項目の ID を設定します。次に、テキスト ノードを作成してリスト項目に追加し、appendchild() メソッドを使用してリスト項目をリストに追加します。

リーリー

例 2 (リストから最後の要素を削除)

以下の例では、JavaScript を使用してリストから最後のリスト項目を削除します。この例は最初の例とよく似ていますが、この例では最後のリスト項目を削除し、最初の例では動的リスト項目を削除している点が異なります。

removeCar() 関数では、「lastElementChild」属性を使用してリストの最後の子要素を取得します。その後、最後の要素が存在する場合はそれを削除します。

出力では、ユーザーはリストに複数の項目を追加し、削除ボタンをクリックしてリスト要素を削除できます。

リーリー

例 3

以下の例では、JavaScript を使用してすべてのリスト項目を削除します。ここではプロジェクトリストを作成します。

JavaScript では、項目を追加する addItem() 関数と、リストからすべての項目を削除する clearAll() 関数を定義します。 clearAll() 関数では、「firstchild」属性を使用してリストの最初の子を取得し、removechild() メソッドを使用して子を削除します。 while ループを使用して、リストのすべての子が削除されるまで繰り返します。

出力では、ユーザーは [すべてクリア] ボタンを押してリストからすべての項目を削除できます。

リーリー ＃＃＃結論は＃＃＃

ユーザーはリストから動的項目を削除する方法を学びました。基本的なアプローチは、動的リスト項目にアクセスして削除するために、各リスト項目に一意の識別子が必要であるということです。ここでは、リスト項目の値を識別子自体の ID として使用します。

2 番目の例では、リストから最後の子要素のみを削除します。3 番目の例では、すべてのリスト項目をまとめて削除します。

以上がJavaScriptを使用して追加されたリスト項目を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。