JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。

実装例（サンプルコード）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
<style>
.red {
  border: 2px solid red;
}
</style>
</head>
<body>
<div>
<ul id="listOfName"></ul>
</div>
<div>
<h1>Add A New Name</h1>
<div>
<input type="text" id="name" placeholder="Add Name......">
<button class="btn" id="addNameButton">AddName</button>
</div>
</div>
<script>
var givenName = document.querySelector('#name')
var btnClass = document.querySelector('#addNameButton')
var listOfName = document.querySelector('#listOfName')
btnClass.addEventListener('click', () => {
  var actualName = givenName.value
  if (actualName.length != 0) {
    var createAnHTMLList = `<li><div>${actualName}</div><button onclick="removeNameFromTheList(this)">Remove Name</button>`
    listOfName.innerHTML += createAnHTMLList
    givenName.value = ''
    givenName.classList.remove('red')
  } else {
    givenName.classList.add('red')
  }
})
function removeNameFromTheList(e) {
  e.parentElement.remove()
}
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイルを「anyName.html」（または「index.html」）という名前で保存し、そのファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」を選択するとブラウザーでページが開き、動作を確認できます。

実行結果

プログラムを実行すると、次のような画面が表示されます。

JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

ここでは、「John」と「David」の2つの名前を追加していきます。まずは入力欄に「John」と入力してみましょう。

JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

「AddName」ボタンをクリックすると、リストに「John」が追加され、次のように表示されます。

JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

同じ手順で「David」も追加できます。2つの名前を追加すると、次のような表示になります。

JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

次に、「John」の横にある「Remove Name」ボタンをクリックして名前を削除してみます。すると、リストから「John」が取り除かれ、次のような結果になります。

JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

コードのポイント

  • document.querySelector() を使って、入力欄・追加ボタン・名前リストの各要素を取得しています。
  • addEventListener('click', ...) で、ボタンがクリックされたときの処理を登録しています。
  • 入力値が空でない場合は、テンプレートリテラルで <li> 要素を生成し、innerHTML に追記することでリストに名前を追加します。追加後は入力欄を自動的にクリアします。
  • 入力が空のままボタンを押した場合は、入力欄に red クラスを付与して枠を赤く表示し、入力を促すことができます。
  • 削除ボタンがクリックされると removeNameFromTheList() が呼び出され、parentElement.remove() によって対象の <li> 要素が丸ごと削除されます。

このように、要素の追加には innerHTML への追記、削除には remove() メソッドを使うだけで、ボタン操作による名前の追加・削除機能を簡単に実装できます。ぜひ実際にコードを動かして、挙動を確認してみてください。

  1. 【初心者向け】jQueryのhide()とshow()でHTMLタグを非表示・再表示する方法

    はじめに Webページ上の既存のHTML要素を一時的に取り除き、あとから再び表示したい場面はよくあります。そんなときに便利なのが、jQueryが提供するhide()メソッドとshow()メソッドです。この2つのメソッドを使えば、ボタン操作ひとつでページ内のコンテンツを簡単に「削除（非表示）」したり「追加（表示）」したりできます。 用意するボタン まず、コンテンツを隠すためのボタンと、再表示するためのボタンの2つをHTMLに配置します。 <button type="submit" id="hide">クリックすると上記のコンテンツを非表示にし

  2. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <