JavaScriptでボタンクリック時にdivを削除する方法


方法1: getElementByIdを使用する方法 この方法では、div要素に一意のIDを割り当て、getElementByIdメソッドを使用してそのIDに基づいて要素を取得し、removeメソッドを呼び出して削除します。

HTML:

<button onclick="removeDiv()">削除</button>
<div id="myDiv">削除される要素</div>

JavaScript:

function removeDiv() {
  var div = document.getElementById("myDiv");
  div.remove();
}

方法2: querySelectorを使用する方法 この方法では、div要素をセレクターを使用して取得し、removeメソッドを呼び出して削除します。

HTML:

<button onclick="removeDiv()">削除</button>
<div id="myDiv">削除される要素</div>

JavaScript:

function removeDiv() {
  var div = document.querySelector("#myDiv");
  div.remove();
}

方法3: イベントリスナーを使用する方法 この方法では、JavaScriptのaddEventListenerメソッドを使用して、ボタンのクリックイベントに対してリスナー関数を登録し、リスナー関数の中でdiv要素を削除します。

HTML:

<button id="myButton">削除</button>
<div id="myDiv">削除される要素</div>

JavaScript:

document.getElementById("myButton").addEventListener("click", function() {
  var div = document.getElementById("myDiv");
  div.remove();
});

これらの方法を使用することで、JavaScriptでボタンクリック時にdiv要素を削除することができます。選択した方法を使用して、コードを実装してみてください。