Question

我试图使用两个按钮。一个添加到'main'标记，另一个删除。当我只在代码中留下addRect函数时能够将rect添加到'main'部分但是当我添加removeRect时所有div的消失。为什么这样，它不起作用？

这是我的代码：

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

脚本：

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

这是你想要实现的目标吗？

检查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();                                                            
     }
 }

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

1 个答案: