如何在JavaScript中使用按钮动态添加/删除父节点？

我正在尝试使用带有add和delete按钮的append-child方法动态创建一个输入字段。 它将创建一个树状结构。 单击“添加”按钮，它将使用“添加”和“删除”按钮创建子节点。 再次单击子节点中的添加按钮，它需要创建一个子节点。这是我手动创建的。 但是我需要动态地添加子节点和子节点（对于n个数字）。 如何在java脚本中使用append-child方法动态添加此项

此外，单击“删除”按钮时，必须删除父节点。 如何获取动态生成的父节点ID

函数add_div（）{
var div1=document.createElement（'ul'）；
文件.正文.附件（第1部分）；
div1.className='ui-modal'；
div1.id='test-'+document.queryselectoral（'.ui modal>.msg1'）。长度；
var检查=div1.id；
var list=document.createElement（'li'）；
list.className='msg1'；
第1部分：附加子项（列表）；
var input=document.createElement（'input'）；
list.appendChild（输入）；
input.placeholder=“parent”；
var button1=document.createElement（'button'）；
列表。追加子项（按钮1）；
var t1=document.createTextNode（“添加”）；
按钮1.附肢儿童（t1）；
按钮1.addEventListener（“单击”，添加第2部分）；
var button2=document.createElement（'button'）；
列表。追加子项（按钮2）；
var t2=document.createTextNode（“DEL”）；
按钮2.附肢儿童（t2）；
按钮2.addEventListener（“单击”，删除div）；
函数add_div2（）{
var div2=document.createElement（'ul'）；
第1分部。附属儿童（第2分部）；
var list=document.createElement（'li'）；
第2部分：附加子项（列表）；
div2.className='子div'；
div2.id='sub_test-'+document.queryselectoral（'.sub div>.msg2'）。长度；
lists.className='msg2'；
第2部分：附加子项（列表）；
var inputs=document.createElement（'input'）；
列表。追加子项（输入）；
inputs.placeholder=“child”；
var button1s=document.createElement（'button'）；
列表。追加子项（按钮1s）；
var t1s=document.createTextNode（“添加”）；
按钮1s。追加子项（t1s）；
按钮1.addEventListener（“单击”，添加第3部分）；
var button2s=document.createElement（'button'）；
列表。追加子项（按钮2s）；
var t2s=document.createTextNode（“DEL”）；
按钮2s。追加子项（t2s）；
按钮2s.addEventListener（“单击”，删除div）；
}
函数add_div3（）{
var div3=document.createElement（'ul'）；
第1分部。附属儿童（第3分部）；
var listss=document.createElement（'li'）；
第3分部附属儿童（列表）；
div3.className='内部子div'；
div3.id='sub_test-'+document.queryselectoral（'.inner sub div>.msg3'）。长度；
listss.className='msg3'；
第3分部附属儿童（列表）；
var inputss=document.createElement（'input'）；
listss.appendChild（inputss）；
inputss.placeholder=“子项”；
var button1ss=document.createElement（'button'）；
listss.appendChild（按钮1ss）；
var t1ss=document.createTextNode（“添加”）；
按钮1ss.appendChild（t1ss）；
var button2ss=document.createElement（'button'）；
listss.appendChild（button2ss）；
var t2ss=document.createTextNode（“DEL”）；
按钮2ss.appendChild（t2ss）；
按钮2ss.addEventListener（“单击”，删除div）；
}
函数remove_div（）{
var check=document.getElementById（'test-0'）；
check.parentNode.removeChild（检查）；
}
}

.ui模式{
宽度：200px；
边框：1px纯红；
位置：相对位置；
左：0；
z指数：55；
}
·分区{
边缘顶部：10px；
宽度：200px；
高度：50px；
左：100px；
边框：1px纯蓝色；
位置：相对位置；
z指数：66；
}
.内分区{
边缘顶部：10px；
宽度：200px；
左：250px；
边框：1px纯蓝色；
位置：相对位置；
z指数：77；
}
.另外{
边框：1px纯红；
显示：内联块；
}

---

而不是尝试获取正确的

ID

，
我建议您在

remove\u div（）

中使用

this

关键字：

关于此的文档：

请参见工作代码段：

函数add_div（）{
var div1=document.createElement（'ul'）；
文件.正文.附件（第1部分）；
div1.className='ui-modal'；
div1.id='test-'+document.queryselectoral（'.ui modal>.msg1'）。长度；
var检查=div1.id；
var list=document.createElement（'li'）；
list.className='msg1'；
第1部分：附加子项（列表）；
var input=document.createElement（'input'）；
list.appendChild（输入）；
input.placeholder=“parent”；
var button1=document.createElement（'button'）；
列表。追加子项（按钮1）；
var t1=document.createTextNode（“添加”）；
按钮1.附肢儿童（t1）；
按钮1.addEventListener（“单击”，添加第2部分）；
var button2=document.createElement（'button'）；
列表。追加子项（按钮2）；
var t2=document.createTextNode（“DEL”）；
按钮2.附肢儿童（t2）；
按钮2.addEventListener（“单击”，删除div）；
函数add_div2（）{
var div2=document.createElement（'ul'）；
第1分部。附属儿童（第2分部）；
var list=document.createElement（'li'）；
第2部分：附加子项（列表）；
div2.className='子div'；
div2.id='sub_test-'+document.queryselectoral（'.sub div>.msg2'）。长度；
lists.className='msg2'；
第2部分：附加子项（列表）；
var inputs=document.createElement（'input'）；
列表。追加子项（输入）；
inputs.placeholder=“child”；
var button1s=document.createElement（'button'）；
列表。追加子项（按钮1s）；
var t1s=document.createTextNode（“添加”）；
按钮1s。追加子项（t1s）；
按钮1.addEventListener（“单击”，添加第3部分）；
var button2s=document.createElement（'button'）；
列表。追加子项（按钮2s）；
var t2s=document.createTextNode（“DEL”）；
按钮2s。追加子项（t2s）；
日分