javascript-Replace one div(created dynamically) with other div(created dynamically) on click of button

0
votes

I have buttons that are dynamically created , let say 5 buttons gets created button1, button2, button3, button4, button5. when I click on some button(let say, button1) a div(say div1) is created. And when i click on other button(say button2) another div(say div2) is created. I want to display one at a time. That is, when i click on button1 , div1 should be displayed and rest other div should not be displayed. But in my code when i click on button1, div1 gets created. And when i click on button2 div2 is appended. I want to replace div2 by div1.

I have tried using replaceWith() and checking for siblings also. But it didn't worked.

Here is my code:

javascript:

$(document).ready(function(){
var request = $.ajax({'url': '/FunctionName'}); 
request.done(function(response) 
 {
    var output = document.getElementById('output');
    response = JSON.parse(response)
    response.forEach(function(item){
    var button = document.createElement("input");
button.type = "button";
button.value = item[0];
button.name= item[0];
button.onclick = createDiv; 
output.appendChild(button);


   function createDiv() {
        var div = document.createElement('div');
        div.setAttribute("id", item[0]);
        div.setAttribute("class","inner");
    div.innerHTML = item[1];
    showDiv.appendChild(div);
   }

});
 });
 request.fail(function(jqXHR, textStatus) 
 {
   alert('Request failed: ' + textStatus);
 });


 });

HTML:

<div id="regex_1" class="tab-pane fade">
    <div id="output" class="panel panel-default" style="float:left; width: 30%" >
    </div>
    <div id="showDiv" class="panel panel-default" style="float:left; width: 70%" >
    </div>
</div>
2
javascriptjqueryhtml
remove ajax code and add something different. ajax will not work properly here. – Sagar V
before you append ,clear that html. – santosh gore
@santosh gore , clearing html worked for me, but everytime a new div is created. Is there any way to replace the text only ? Something like, if there is no div, then create div. And if div already exist replace the text inside the div on button click. – ujjawl saini

2 Answers

0
votes

This is a simple replacement div code. Is your expectation?

$(".buttonShowDiv").on("click", function(){
  $("#mainDiv .replaceDiv").replaceWith($(this).closest("div").find(".replaceDiv").clone());
  $("#mainDiv .replaceDiv").show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="div1 replaceDiv" hidden="hidden">
    <p>This is div 1</p>
  </div>
  <input type="button" class="buttonShowDiv" value="button 1"/>
</div>
<div>
  <div class="div2 replaceDiv" hidden="hidden">
    <p>This is div 2</p>
  </div>
  <input type="button" class="buttonShowDiv" value="button 2"/>
</div>
<div id="mainDiv">
  <div class="replaceDiv">
    <p>This is default div</p>
  </div>
</div>
0
votes

Add one more class to your divs like 'alldivs'.

So all of your divs will be hidden except for the one you are creating.

function createDiv() {
    var alldives=document.getElementsByClassName('alldivs');
    alldivs.display='none';
    var div = document.createElement('div');
    div.setAttribute("id", item[0]);
    div.setAttribute("class","inner alldivs");
    div.innerHTML = item[1];
    showDiv.appendChild(div);

}

This way you can hide all of other divs that you have created before and only show to current one.