单击时动态按钮不工作-Javascript

我可以动态创建delete按钮，但为其设置的操作无法正确执行。我试图一次删除一个项目。我只能使用JavaScript，不能编辑HTML，但我已经为它提供了代码，所以可以对它进行测试。任何提示都会有帮助

var form=document.getElementsByTagNameform[0]； form.method=POST； form.action=表单处理程序； form.onsubmit=validateForm； var add=document.getElementsByClassName'add'； 添加[0]。onclick=houseList； var-lastId=0； var age=document.getElementsByNameage[0]； 年龄.类型=数量； age.required=true； 年龄.min=0； 年龄最大值=120； var dropDown=document.getElementsByNamerel[0]； dropDown.type=选项； dropDown.required=true； var newDiv=document.createElementdiv； newDiv.setAttributeid，houseMem； document.body.appendChildnewDiv； //var title=document.createElementh2； //标题=成员名单； //newDiv.appendChildtitle* var ul=document.createElementul； ul.setAttributeid，memList； 纽迪夫·阿帕迪尔； 功能列表{ var li=document.createElementli li.appendChilddocument.createTextNodedropDown.value+“”+age.value+ li.setAttribute'id'，item'+lastId； ul.appendChildli； var remove=document.createElement'button' remove.appendChilddocument.createTextNodedelete remove.onclick=removietem； //setAttribute'onclick'，'removietem'； remove.setAttribute'onclick'，'removietem'+'item'+lastId+''； 李,李,李,； lastId+=1； ul.appendChildli； 返回false； } 函数RemoveItemId{ var item=document.getElementByIditemid； ul.移除项目 } 函数validateForm{ 如果age==null | | age.value=={ 必须填写alertAge； 返回false； }如果dropDown.value==null，则为else{ 请选择一种关系； 返回false； }否则{ 您输入：+age.value+并选择：+dropDown.value； 返回addToList； } } .调试{ 字体系列：monospace； 边框：1px纯黑； 填充：10px； 显示：无； } 家庭建筑商 家庭建筑商 年龄 关系 -- 自己 配偶 小孩 父母亲 祖父母 另外 吸烟者 添加 提交

---

问题在于移除函数将移除所有ul元素，应该获得当前单击元素的相关父元素，如：

function removeItem(itemid) { 
    var item = document.getElementById(itemid);
    item.parentNode.removeChild(item);
}

代码：

var form=document.getElementsByTagNameform[0]； form.method=POST； form.action=表单处理程序； form.onsubmit=validateForm； var add=document.getElementsByClassName'add'； 添加[0]。onclick=houseList； var-lastId=0； var age=document.getElementsByNameage[0]； 年龄.类型=数量； age.required=true； 年龄.min=0； 年龄最大值=120； var dropDown=document.getElementsByNamerel[0]； dropDown.type=选项； dropDown.required=true； var newDiv=document.createElementdiv； newDiv.setAttributeid，houseMem； document.body.appendChildnewDiv； //var title=document.createElementh2； //标题=成员名单； //newDiv.appendChildtitle* var ul=document.createElementul； ul.setAttributeid，memList； 纽迪夫·阿帕迪尔； 功能列表{ var li=document.createElementli li.appendChilddocument.createTextNodedropDown.value+“”+age.value+ li.setAttribute'id'，item'+lastId； ul.appendChildli； var remove=document.createElement'button' remove.appendChilddocument.createTextNodedelete remove.onclick=removietem； //setAttribute'onclick'，'removietem'； remove.setAttribute'onclick'，'removietem'+'item'+lastId+''； 李,李,李,； lastId+=1； ul.appendChildli； 返回false； } 函数RemoveItemId{ var item=document.getElementByIditemid； item.parentNode.removeChilditem； } 函数validateForm{ 如果age==null | | age.value=={ 必须填写alertAge； 返回false； }如果dropDown.value==null，则为else{ 请选择一种关系； 返回false； }否则{ 您输入：+age.value+并选择：+dropDown.value； 返回addToList； } } .调试{ 字体系列：monospace； 边框：1px纯黑； 填充：10px； 显示：无； } 家庭建筑商 年龄 关系 -- 自己 配偶 小孩 父母亲 祖父母 另外 吸烟者 添加 提交 问题是t 移除所有ul元素的移除函数应获取当前单击元素的相关父元素，如：

function removeItem(itemid) { 
    var item = document.getElementById(itemid);
    item.parentNode.removeChild(item);
}

代码：

var form=document.getElementsByTagNameform[0]； form.method=POST； form.action=表单处理程序； form.onsubmit=validateForm； var add=document.getElementsByClassName'add'； 添加[0]。onclick=houseList； var-lastId=0； var age=document.getElementsByNameage[0]； 年龄.类型=数量； age.required=true； 年龄.min=0； 年龄最大值=120； var dropDown=document.getElementsByNamerel[0]； dropDown.type=选项； dropDown.required=true； var newDiv=document.createElementdiv； newDiv.setAttributeid，houseMem； document.body.appendChildnewDiv； //var title=document.createElementh2； //标题=成员名单； //newDiv.appendChildtitle* var ul=document.createElementul； ul.setAttributeid，memList； 纽迪夫·阿帕迪尔； 功能列表{ var li=document.createElementli li.appendChilddocument.createTextNodedropDown.value+“”+age.value+ li.setAttribute'id'，item'+lastId； ul.appendChildli； var remove=document.createElement'button' remove.appendChilddocument.createTextNodedelete remove.onclick=removietem； //setAttribute'onclick'，'removietem'； remove.setAttribute'onclick'，'removietem'+'item'+lastId+''； 李,李,李,； lastId+=1； ul.appendChildli； 返回false； } 函数RemoveItemId{ var item=document.getElementByIditemid； item.parentNode.removeChilditem； } 函数validateForm{ 如果age==null | | age.value=={ 必须填写alertAge； 返回false； }如果dropDown.value==null，则为else{ 请选择一种关系； 返回false； }否则{ 您输入：+age.value+并选择：+dropDown.value； 返回addToList； } } .调试{ 字体系列：monospace； 边框：1px纯黑； 填充：10px； 显示：无； } 家庭建筑商 年龄 关系 -- 自己 配偶 小孩 父母亲 祖父母 另外 吸烟者 添加 提交 这需要ID，但仅使用事件引用调用：

remove.onclick = removeItem;

我建议保留调用部分并编辑removeItem函数：

function removeItem(event) { 
  var item = event.target;
  item.parentNode.remove(item); 
}

这需要ID，但仅使用事件引用调用：

remove.onclick = removeItem;

我建议保留调用部分并编辑removeItem函数：

function removeItem(event) { 
  var item = event.target;
  item.parentNode.remove(item); 
}

---

在removeItem函数中

 function removeItem(itemid) { 
   var item = document.getElementById(itemid);
   ul.remove(item);  // HERE
 }    

将行更改为ul.removeChilditem

顺便说一句

我建议您编写您定义的函数之外的任何代码，在 在加载窗口后缩放的函数。。 您正在尝试访问尚未创建的dom元素

---

//旁注-请记住，根据您希望在removeItem函数中知道的范围来定义任何变量

 function removeItem(itemid) { 
   var item = document.getElementById(itemid);
   ul.remove(item);  // HERE
 }    

将行更改为ul.removeChilditem

顺便说一句

我建议您编写您定义的函数之外的任何代码，在 在加载窗口后缩放的函数。。 您正在尝试访问尚未创建的dom元素

---

//旁注-请记住，根据您希望它们被知道的范围定义任何变量都是一个范围

，因为其他人都提到了元素。remove函数将该元素从DOM中移除，而不是作为参数的子元素。您可以简单地告诉该项使用item.remove从DOM中删除它自己，在您的示例中，也可以使用任何其他建议，从中获取父元素，然后执行parent.removeChilditem。在您的例子中，第一种方法的好处是您已经有了项，因此不需要获取父项，因为remove是一种在旧浏览器中可能不可用的快捷方式

第二，我不建议将onclick事件设置为setAttribute，因为它与一些旧浏览器不兼容，而且有点不规范

如果您只想添加一个函数event或addEventListenerclick，则使用onclick=function是一种更合适的方法。在非常旧的IE中，函数attachEvent用于需要向fire添加多个事件的更复杂的情况

var form=document.getElementsByTagNameform[0]； form.method=POST； form.action=表单处理程序； form.onsubmit=validateForm； var add=document.getElementsByClassName'add'； 添加[0]。onclick=houseList； var-lastId=0； var age=document.getElementsByNameage[0]； 年龄.类型=数量； age.required=true； 年龄.min=0； 年龄最大值=120； var dropDown=document.getElementsByNamerel[0]； dropDown.type=选项； dropDown.required=true； var newDiv=document.createElementdiv； newDiv.setAttributeid，houseMem； document.body.appendChildnewDiv； //var title=document.createElementh2； //标题=成员名单； //newDiv.appendChildtitle* var ul=document.createElementul； ul.setAttributeid，memList； 新附属物 杜尔； 函数删除函数项{ 返回函数event{removietemitem}； } 功能列表{ var li=document.createElementli li.appendChilddocument.createTextNodedropDown.value+“”+age.value+ li.setAttribute'id'，item'+lastId； ul.appendChildli； var remove=document.createElement'button' remove.appendChilddocument.createTextNodedelete remove.onclick=deleteFunction'item'+lastId； 李,李,李,； lastId+=1； ul.appendChildli； 返回false； } 函数RemoveItemId{ var item=document.getElementByIditemid； 项目.删除 } 函数validateForm{ 如果age==null | | age.value=={ 必须填写alertAge； 返回false； }如果dropDown.value==null，则为else{ 请选择一种关系； 返回false； }否则{ 您输入：+age.value+并选择：+dropDown.value； 返回addToList； } } .调试{ 字体系列：monospace； 边框：1px纯黑； 填充：10px； 显示：无； } 家庭建筑商 家庭建筑商 年龄 关系 -- 自己 配偶 小孩 父母亲 祖父母 另外 吸烟者 添加 提交

---

正如其他人提到的，element.remove函数从DOM中删除该元素，而不是作为参数的子元素。您可以简单地告诉该项使用item.remove从DOM中删除它自己，在您的示例中，也可以使用任何其他建议，从中获取父元素，然后执行parent.removeChilditem。在您的例子中，第一种方法的好处是您已经有了项，因此不需要获取父项，因为remove是一种在旧浏览器中可能不可用的快捷方式

第二，我不建议将onclick事件设置为setAttribute，因为它与一些旧浏览器不兼容，而且有点不规范

如果您只想添加一个函数event或addEventListenerclick，则使用onclick=function是一种更合适的方法。在非常旧的IE中，函数attachEvent用于需要向fire添加多个事件的更复杂的情况

var form=document.getElementsByTagNameform[0]； form.method=POST； form.action=表单处理程序； form.onsubmit=validateForm； var add=document.getElementsByClassName'add'； 添加[0]。onclick=houseList； var-lastId=0； var age=document.getElementsByNameage[0]； 年龄.类型=数量； age.required=true； 年龄.min=0； 年龄最大值=120； var dropDown=document.getElementsByNamerel[0]； dropDown.type=选项； dropDown.required=true； var newDiv=document.createElementdiv； newDiv.setAttributeid，houseMem； document.body.appendChildnewDiv； //var title=document.createElementh2； //标题=成员名单； //newDiv.appendChildtitle* var ul=document.createElementul； ul.setAttributeid，memList； 纽迪夫·阿帕迪尔； 函数删除函数项{ 返回函数event{removietemitem}； } 功能列表{ var li=document.createElementli li.appendChilddocument.createTextNodedropDown.value+“”+age.value+ li.setAttribute'id'，item'+lastId； ul.appendChildli； var remove=document.createElement'button' remove.appendChilddocument.createTextNodedelete remove.onclick=deleteFunction'item'+lastId； 李,李,李,； lastId+=1； ul.appendChildli； 返回false； } 函数RemoveItemId{ var item=document.getElementByIditemid； 项目.删除 } 函数validateForm{ 如果age==null | | age.value=={ 必须填写alertAge； 返回false； }如果dropDown.value==null，则为else{ 请选择一种关系； 返回false； }否则{ 您输入：+age.value+并选择：+dropDown.value； 返回addToList； } } .调试{ 字体系列：monospace； 边框：1px纯黑； 填充：10px； 显示：无； } 家庭建筑商 家庭建筑商 年龄 关系 -- 自己 配偶 小孩 父母亲 祖父母 另外 吸烟者 添加 提交

---

有没有可能把你的问题简化一些？时间很长，我想知道我是否

---

t是相关的。有没有可能把你的问题简化为什么？这相当长，我想知道是否所有这些都是相关的。非常感谢。你的小费有用！我不知道我可以使用parentNode…我以为它指的是ul。再次感谢！非常感谢你。你的小费有用！我不知道我可以使用parentNode…我以为它指的是ul。再次感谢！