JavaScriptを使用した要素の非表示（hide）とイベントのクリック（onclick）

onclickイベントハンドラを使用した要素の非表示: 要素を非表示にするために、onclickイベントハンドラを使用する方法があります。以下の例では、クリックされた要素を非表示にする方法を示します。

<!DOCTYPE html>
<html>
<head>
<script>
function hideElement() {
  var element = document.getElementById("targetElement");
  element.style.display = "none";
}
</script>
</head>
<body>
<div id="targetElement">非表示する要素</div>
<button onclick="hideElement()">クリックして非表示にする</button>
</body>
</html>

上記のコードでは、idが"targetElement"の要素がクリックされると、その要素の表示が非表示になります。

クラス名を使用した要素の非表示: 要素にクラス名を追加することで非表示にする方法もあります。以下の例では、クリックされた要素にクラス名"hidden"を追加し、非表示にします。

<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
  display: none;
}
</style>
<script>
function hideElement() {
  var element = document.getElementById("targetElement");
  element.classList.add("hidden");
}
</script>
</head>
<body>
<div id="targetElement">非表示する要素</div>
<button onclick="hideElement()">クリックして非表示にする</button>
</body>
</html>

上記のコードでは、idが"targetElement"の要素がクリックされると、その要素にクラス名"hidden"が追加され、非表示になります。

jQueryを使用した要素の非表示: もしjQueryを使用する場合、要素を非表示にするのは非常に簡単です。以下の例では、クリックされた要素を非表示にする方法を示します。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#targetElement").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<div id="targetElement">非表示する要素</div>
</body>
</html>

上記のコードでは、idが"targetElement"の要素がクリックされると、その要素が非表示になります。

これらは要素を非表示にするためのいくつかの一般的な方法です。他にもさまざまな方法がありますが、上記の例は基本的な手法を示しています。必要に応じて、これらの例を修正して使用することができます。