方法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要素を削除することができます。選択した方法を使用して、コードを実装してみてください。