When selecting new option from list have it replace previous element

Question

Right now when selecting an option it will be added to the DOM and then when selecting another it will just keep adding selected options.

I would like it so that whenever a option is selected that is the only thing that will show. Do not add the elements just replace them when a new one is selected.

 //Function to add Elements function myFunction() { var x = document.getElementById("mySelect").value; if(x == "format_text"){ document.getElementById("container").innerHTML += '<div id="block"><h2>Formatted Text</h2><textarea style="width:100%; height: 300px;"></textarea><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect mt-20">Remove Block</button></div></div>' } else if (x == "rightImg_leftTxt"){ document.getElementById("container").innerHTML += '<div id="block"><h2>Right Image Left Text</h2><div class="row" id="container"><div class="col-md-6"><input type="file" accept="image/*" onchange="preview_image(event)"><img id="output_image"/></div><div class="col-md-6"><textarea style="width:100%; height: 300px;"></textarea></div></div><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect mt-20">Remove Block</button></div>' } else if (x == "leftImg_rightTxt"){ document.getElementById("container").innerHTML += '<div id="block"><h2>Left Image Right Text</h2><div class="row" id="container"><div class="col-md-6"><textarea style="width:100%; height: 300px;"></textarea></div><div class="col-md-6"><input type="file" accept="image/*" onchange="preview_image(event)"><img id="output_image"/></div></div><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect mt-20">Remove Block</button></div>' } } //Function For image Preview function preview_image(event) { var reader = new FileReader(); reader.onload = function() { var output = document.getElementById('output_image'); output.src = reader.result; } reader.readAsDataURL(event.target.files[0]); } //Delete button Function function Delete(button) { var elem = document.getElementById("block"); elem.parentNode.removeChild(elem); event.preventDefault(); }

 <div class="form-group col-md-9"> <div class="btn-group bootstrap-select form-control show-tick"> <select id="mySelect" class="form-control show-tick" name="assignee_token" tabindex="-98" onchange="myFunction()" required> <option value="0">Choose Block Type</option> <option value="format_text">Formatted Text</option> <option value="rightImg_leftTxt"> Right Image, Left Text</option> < <option value="leftImg_rightTxt"> Left Image, Right Text</option> </select> </div> </div> </div> </div> <div class="card"> <div class="body"> <textarea name="body" class="summernote" id="contents" title="Contents"> </textarea> <button type="submit" class="btn btn-info waves-effect mt-20">Create</button> </div> </div> <div class="card"> <div class="body"> <div id="container" class="container"> <!-- <div id="container"> </div> --> </div> </div> </div> </div> </form> </div> </div> </div> </section>

Answer 1

这是因为你使用+=中document.getElementById("container").innerHTML += ，保持增加的东西无论是已经存在。