如何在单击按钮时显示隐藏图标和删除文本

<button id="toggleButton">点击切换</button>
<div id="icon" style="display: none;">图标</div>
<p id="text">文本内容</p>

#icon {
  /* 添加图标样式 */
}

.hide {
  display: none;
}

document.getElementById("toggleButton").addEventListener("click", function() {
  var icon = document.getElementById("icon");
  var text = document.getElementById("text");

  // 切换图标的显示与隐藏
  if (icon.style.display === "none") {
    icon.style.display = "block";
  } else {
    icon.style.display = "none";
  }

  // 切换文本的显示与隐藏
  if (text.classList.contains("hide")) {
    text.classList.remove("hide");
  } else {
    text.classList.add("hide");
  }
});