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

Question

I want to show a hidden div once a user click on a text input and remove the div that was displayed, but if the user click again on the text input I don't want the div that just got deleted to show up again.

I have tried this so far:

<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" />

.

$(function(){
    $("#div2").hide();
    $("#div1").show();
    $("#input").on("click", function(){

      $(" #div2").toggle();

    });

});

Answer 1

I think this below snippet solves your problem, please let me know if this helps you!

 $(function(){ $("#div2").hide(); $("#div1").show(); $("#input").on("click", function(){ $("#div1").hide(); $(" #div2").show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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" /> 

Answer 2

I want to show a hidden div once a user click on a text input and remove the div that was displayed

Add a focus event to the input

$("#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
});

Demo

 $("#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 }); 

 #div2 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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" /> 

Answer 3

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

Don't make two buttons, one for hide and other one for show . Make one button and use toggle() . Now that's all you need ... This will definitely work.

Read this it will help you https://www.javatpoint.com/jquery-toggle

:)