儿童div元素管理

Question

  var arrlength;//////////////////////////////////////////////////////////////////
function opentextarea(borderColor) { 
    
    var arr = document.getElementsByClassName("myCustomTextarea");
    arrlength=arr.length;
    
var goOut= 1;
Array.prototype.forEach.call(arr, function(el) {
   if (el.style.backgroundColor!=='lightblue'){
     goOut=0;
     alert("Enter or delete the previus commnet!"); 
   }
});
 if (goOut===1){
  //////////////
  
    var comentwindow = document.getElementById("StatusID"); //StatusID 
    var d1 = new Date();
    var d2= d1.toDateString();
    var d3= d1.toLocaleTimeString();
    var dateTimeUser = document.createTextNode(d2+" "+d3+" username");
    //dateTimeUser.style.fontSize = "8px";
    dateTimeUser.className = 'dateTimeUserClasN';
    dateTimeUser.id = arrlength+"dateTimeUserID";
    comentwindow.appendChild(dateTimeUser); /////////////////////////////////////////1
    
    var input = document.createElement('textarea');   
    input.maxLength = 5000;
    input.cols = 28;
    input.rows = 5;
    input.style.borderColor = borderColor;
    input.className = 'myCustomTextarea';
    var arr = document.getElementsByClassName("myCustomTextarea");
    input.id = arrlength+"textarea";
    //var comentwindow = document.getElementById("StatusID"); //StatusID 
    comentwindow.appendChild(input);//////////////////////////////////////////////////2
    
            
     var ele = document.getElementById(arrlength+"buttonSE");
     if(ele === null){ 
          var buttonSE = document.createElement('button');
          buttonSE.className = 'enterCommentBut';
          buttonSE.id=arrlength+"buttonSE";
         buttonSE.onclick = function() { 
              
             if(document.getElementById(arrlength+"textarea").value != ''){
            document.getElementById(arrlength+"textarea").style.backgroundColor= "lightblue";
             var e1 = document.getElementById('StatusID');
            var e2 =(e1.children.length);
            e1.removeChild(e1.children[e2-1]);
            e1.removeChild(e1.children[e2-2]);
             }else{
                 alert("It is not posible to enter empty comment.");
             }
         }
        var SE = document.createTextNode("Enter");       
        buttonSE.appendChild(SE);
        comentwindow.appendChild(buttonSE);/////////////////////////////////////////////3     
   }
  
  var ele2 = document.getElementById(arrlength+"buttonSC");
     if(ele2 === null){ 
          var buttonSC = document.createElement('button');
          buttonSC.className = 'clearCommentBut';
          buttonSC.id=arrlength+"buttonSC";
          buttonSC.onclick = function() { 
            var e1 = document.getElementById('StatusID');
            var e2 =(e1.children.length);
           
           var myNode = document.getElementById("StatusID");
            while (myNode.lastChild) {
            myNode.removeChild(myNode.lastChild);
          }    
         };
        var SC = document.createTextNode("Clear");       
        buttonSC.appendChild(SC);  
        comentwindow.appendChild(buttonSC);//////////////////////////////////////4
       }
  
    }
 }

  
function createObject2(){ 
     var e3 = document.getElementById("StatusID");
       var e4 = document.getElementById("Status0ID");
        var e5 = document.getElementById("Status2ID");
        
   
          e3.style.display = 'block';
          e4.style.display = 'block';
          e5.style.display = 'block';
}
document.getElementById("clickMe2").onclick = createObject2;



function updateScroll(){
    var element = document.getElementById("StatusID");
    element.scrollTop = element.scrollHeight;
}
   

function ObjectRed(){
 
  var borderColor= "red";
   opentextarea(borderColor);
   updateScroll();
  
}
document.getElementById("ObjectRed").onclick = ObjectRed;

function ObjectGreen(){
  
  var borderColor= "green";
   opentextarea(borderColor);
   updateScroll();
  
}
document.getElementById("ObjectGreen").onclick = ObjectGreen;
  

*,
*::before,
*::after {
  box-sizing: border-box;
}



div.Status0 {
     position: absolute;
    top: 15px;
    width: 250px;
    height:40px;
    margin: 0;
    padding: 1em;
   font-size: 12px;
   border: solid 1px #dfdfdf;
 
  overflow-x: hidden;
  overflow-y: visible;
  background-color: white;
}

div.Status1 {
     position: absolute; 
    top: 70px;
    width: 250px;
    height:700px;
    margin: 0;
    padding: 1em;
  font-size: 12px;
  border: solid 1px #dfdfdf;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: white;
}

div.Coment1{
    float: left;
    width: 130px;
 height:100px;
    margin: 0;
    padding: 1em;
  font-size: 12px;
 /* height: 100%;
  overflow: auto;*/
 border: solid 1px #dfdfdf;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: yellow;
}

.content {
  padding: 18px 0;
  border-bottom: solid 2px #cfcfcf;
}


.myCustomTextarea {
border:0; 
padding:1px; 
font-size:1.0em; 
font-family:"Times New Roman";
color:black; 
border:solid 2px #ccc; 
margin:0 0 4px; 
width:215px;
height:50px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
}

.myCustomTextarea:focus {
        resize: none;
        border-radius: 5px;
        outline: none !important;
  }
   
.dateTimeUserClasN{
 
}
.startbutton{
     position: absolute; 
    left: 270px;
    top:20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Custom </title> 

</head>
<body>
    <div class="Status0" id="Status0ID" style="display: none">
         <input type="button" id="ObjectRed" value="Problem" />
         <input type="button" id="ObjectGreen" value="Okay" />
    </div>
    
    <div class="Status2" id="Status2ID" style="display: none">
        <div class="Status1" id="StatusID" style="display: none"></div>
    </div>
           
    <input class =" startbutton" type="button" id="clickMe2" value="New object2"  /> 
             

 <script src="js/createObject.js"></script>
 <link rel="stylesheet" href="css/styleIvan.css">
</body>
</html>

我在主“div”中有一个“div”。 Status2中的Status1。 Status1有一个时间日期文本，textarea和两个按钮（输入和取消）。

当我调用opentextarea函数时，我得到了这4个元素。

以下是评论管理的代码。问题是当我按下“取消”按钮时。它删除所有。但我想删除最后一个包  4个元素（最后一个Status1 div）。我需要Status1成为Status2的孩子。所以当我按下取消时只删除最后一个孩子。

我无法为我工作，所以我在这里寻求帮助。

怎么做？