Javascript 如何在单击时删除一个div并显示另一个div

我想在用户单击文本输入后显示隐藏的div并删除显示的div，但是如果用户再次单击文本输入，我不希望刚刚删除的div再次显示

到目前为止，我已经尝试过：

<div id="div1"> Have to be remove on click</div>

<div id="div2">Hidden on page load and show on click</div>

<input type="text" id="input" placeholder="click here" />

---

我认为下面的代码片段解决了您的问题，请让我知道这是否对您有帮助

$（函数（）{
$（“#div2”）.hide（）；
$（“#div1”）.show（）；
$（“#输入”）。在（“单击”，函数（）{
$（“#div1”）.hide（）；
$（“#div2”）.show（）；
});
});

必须在单击时删除
页面加载时隐藏，单击时显示

我想在用户单击文本输入并
删除显示的div

将
焦点
事件添加到
输入

$("#input").on("focus", function() {
  $("#div1").remove(); //div1 is removed
  $(" #div2").show(); //hidden div is shown
});

$("#input").on("blur", function() {
  $(" #div2").hide(); //div2 is hidden again
});

演示


$（“#输入”）。关于（“焦点”，函数（）{
$（“#div1”）.remove（）；//已删除div1
$（“#div2”）.show（）；//显示隐藏的div
});
$（“#输入”）。关于（“模糊”，函数（）{
$（“#div2”）.hide（）；//再次隐藏div2
});
#div2{
显示：无；
}

必须在单击时删除
页面加载时隐藏，单击时显示

不要制作两个按钮，一个用于隐藏，另一个用于显示。
制作一个按钮并使用切换（）。
现在这就是你所需要的。。。这肯定会奏效的

读这本书，它会帮助你的

：）
我认为你的问题不清楚。您想在单击按钮时隐藏#div1并显示div2吗？在它点击后，它不应该再出现？？你的例子，它几乎是工作，但如果用户再次点击文本输入div2消失。我不希望第二季在它出现后消失。
$("#input").on("focus", function() {
  $("#div1").remove(); //div1 is removed
  $(" #div2").show(); //hidden div is shown
});

$("#input").on("blur", function() {
  $(" #div2").hide(); //div2 is hidden again
});

$(document).ready(function(){ 
$("#input").click(function(){
      $("#div1").toggle();
    }); 
});