如何添加/删除与特定类相关的div，请点击

Question

im trying to use two buttons. one to add a to the 'main' tag and the other to remove. when i leave only the addRect function in the code im able to add rect's to the 'main' section but when i add the removeRect all div's dissapear. why is that and isnt it working?

this is my code:

<div id="buttonscontainer">
    <button class="button" id="add"></button>   
    <button class="button" id="remove"></button>    
</div>

<main id="main">
    <div class="rect"></div>
    <div class="rect"></div>
</main>

script:

/*Calls the addRect function*/
window.onload=function() {
     document.getElementById("add").onclick = addRect;
     document.getElementById("remove").onclick = removeRect;
    }

/*defines the behaviour of the onclick*/
 function addRect(){
     document.getElementById("main").innerHTML +='<div class="rect"></div>';
 }

 /*defines the behaviour of the onclick*/
 function removeRect(){
     document.getElementById("main").innerHTML -='<div class="rect"></div>';
 }

Answer 1

Is this what you're trying to achieve?

Check JsFiddle Demo

HTML

<div id="buttonscontainer">
    <button class="button" id="add" onClick="addRect();">add</button>   
    <button class="button" id="remove" onClick="removeRect();">remove</button>    
</div>

<main id="main">
    <div class="rect">bla</div>
    <div class="rect">ble</div>
</main>

JS

 function addRect(){
     var x = '<div class="rect">bli</div>';

     document.getElementById("main").innerHTML += x;
 }

 function removeRect(){
     var main = document.getElementById("main");

     if (main.children.length > 0) {           
         main.lastChild.remove();                                                            
     }
 }