Javascript-删除最后添加的div？

所以，我在学习Javascript时遇到了一个问题。我有一个功能，将添加一些框，当我点击“添加数据”，我可以点击这个多次，但我想能够有一个按钮称为“删除数据”，这将允许我删除最后一个我添加的

代码可以在这里找到

.hidden{显示：无；}
.自我输入{
填充物：5px；
}
格林先生{
颜色：#5b7762；
}
textarea，输入{font-family:monospace；}
图表类型：
饼图
添加数据
生成图表短代码

var chartType=document.getElementsByName（“chartType”）；
var title=document.getElementById（“title”）；
var source=document.getElementById（“source”）；
var y_title=document.getElementById（“y_title”）；
var y_max=document.getElementById（“y_max”）；
var y_min=document.getElementById（“y_min”）；
var x_labels=document.getElementById（“x_labels”）；
var dataURL=document.getElementsByName（“datalabel”）；
var dataCAPTION=document.getElementsByName（“dataCAPTION”）；
函数createInput（类型、名称、类名=null）{
var输入=document.createElement（“输入”）；
input.type=type；
input.name=名称；
input.class=className；
返回输入
}
函数createLabel（名称、文本、类名=null）{
var label=document.createElement（“标签”）；
label.for=名称；
label.class=className；
label.innerHTML=文本
退货标签；
}
函数addInput（）{
div=document.createElement（“div”）
div.appendChild（createLabel（“数据标签”、“URL:”、“控件标签”））
div.appendChild（createInput（“文本”、“数据标签”、“数据标签”））
div.appendChild（createLabel（“数据标题”，“控制标签”））
div.appendChild（createInput（“文本”、“数据标题”、“数据标题”））
div.classList.add（“自输入”）
document.getElementById（“inputArea”）.appendChild（div）；
}
函数findChartType（）{
if（图表类型[0]。选中==true）{
document.getElementById（“pieHidden”）.classList.add（“hidden”）；
}
否则{
document.getElementById（“pieHidden”）.classList.remove（“hidden”）；
}
}
函数datastring（）{
var ds=“”；
对于（i=0；i'；
}
返回ds；
}
函数生成器（）{
if（图表类型[0]。选中==true）{
document.getElementById（“finalString”）.value=''+'
'+datastring（）+'
'；
}
else if（图表类型[2]。选中==true）{
document.getElementById（“finalString”）.value=“”；
}
否则{
document.getElementById（“finalString”）.value=“请选择图表类型并填写图表信息。”；
}
};

---

任何帮助都会非常好谢谢。

您可以通过在javascript中添加这两个函数来创建按钮

function createButton(type, name, className, value){
    var input = document.createElement("input");
    input.type = type;
    input.name = name;
    input.class = className;
    input.value = value;
    input.addEventListener("click", removeData);
    return input
}



function removeData() {
  this.parentNode.parentNode.removeChild(this.parentNode);
}

然后将此行添加到

函数addInput（）

---

下面是一个工作示例--

.hidden{显示：无；}
.自我输入{
填充物：5px；
}
.green输入{font-family:monospace；}
图表类型：
饼图
添加数据
生成图表短代码

var chartType=document.getElementsByName（“chartType”）；
var title=document.getElementById（“title”）；
var source=document.getElementById（“source”）；
var y_title=document.getElementById（“y_title”）；
var y_max=document.getElementById（“y_max”）；
var y_min=document.getElementById（“y_min”）；
var x_labels=document.getElementById（“x_labels”）；
var dataURL=document.getElementsByName（“datalabel”）；
var dataCAPTION=document.getElementsByName（“dataCAPTION”）；
函数createInput（类型、名称、类名=null）{
var输入=document.createElement（“输入”）；
input.type=type；
input.name=名称；
input.class=className；
返回输入
}
函数createButton（类型、名称、类名、值、onclick）{
var输入=document.createElement（“输入”）；
input.type=type；
input.name=名称；
input.class=className；
input.value=值；
input.addEventListener（“单击”，删除数据）；
返回输入
}
函数createLabel（名称、文本、类名=null）{
var label=document.createElement（“标签”）；
label.for=名称；
label.class=className；
label.innerHTML=文本
退货标签；
}
函数addInput（）{
div=document.createElement（“div”）
div.appendChild（createLabel（“数据标签”、“URL:”、“控件标签”））
div.appendChild（createInput（“文本”、“数据标签”、“数据标签”））
div.appendChild（createLabel（“数据标题”，“控制标签”））
div.appendChild（createInput（“文本”、“数据标题”、“数据标题”））
div.appendChild（createButton（“按钮”、“removeData”、“btn禁用”、“removeData”））
div.classList.add（“自输入”）
document.getElementById（“inputArea”）.appendChild（div）；
}
函数removeData（）{
this.parentNode.parentNode.removeChild（this.parentNode）；
}
函数findChartType（）{
if（图表类型[0]。选中==true）{
document.getElementById（“pieHidden”）.classList.add（“hidden”）；
}
否则{
document.getElementById（“pieHidden”）.classList.remove（“hidden”）；
}
}
函数datastring（）{
var ds=“”；
对于（i=0；i'；
function createButton(type, name, className, value){
    var input = document.createElement("input");
    input.type = type;
    input.name = name;
    input.class = className;
    input.value = value;
    input.addEventListener("click", removeData);
    return input
}



function removeData() {
  this.parentNode.parentNode.removeChild(this.parentNode);
}

div.appendChild(createButton("button","removeData","btn-disable",   
"RemoveData"))

<!doctype html>
<html>
<body>

<div id="Fields">
    <div id="DIV_0"> Field_0: <input type="text"> </div>
</div>
<button onClick="AddField()"> Add Field </button>
<button onClick="DelField()"> Del Field </button>
<hr>
<div id="Last_Index"> 0 </div>

<script>
    function AddField()
    {
        var Last_Index = document.getElementById('Last_Index');

        var Add_Index = Number(Last_Index.innerHTML) + 1;

            Last_Index.innerHTML = Add_Index;       

        var New_Div           = document.createElement('div');
            New_Div.id        = 'DIV_'+Add_Index;       
            New_Div.innerHTML = 'Field_'+Add_Index+': ';

        var New_Input = document.createElement('input');

            New_Div.appendChild(New_Input);     

        var Fields = document.getElementById('Fields');     
            Fields.appendChild(New_Div);
    }

    function DelField()
    {
        var Last_Index = document.getElementById('Last_Index');         

        var Del_Index = Number(Last_Index.innerHTML);

        if ( Del_Index > 0 )
        {
                Last_Index.innerHTML = Del_Index - 1;

            var Last_Div = document.getElementById('DIV_'+Del_Index);
                Last_Div.innerHTML = '';

            var Fields = document.getElementById('Fields');
                Fields.removeChild(Last_Div);
        }
    }

</script>

</body>
</html>