Javascript 无法读取属性'；目标'；未定义函数的删除不工作

我有一个有3个联系人的数组。我希望在单击“删除”按钮时删除同一个人的姓名，但不幸的是，我不知道问题出在哪里，因为它不起作用。 我在这个程序中有两个函数，一个是执行删除操作的

removeContact

我有一个名为

showrecords

的函数来获取数组的内容，并显示联系人的姓名和数量，每个联系人都有一个专用的删除按钮 在这个程序中，我使用了模式生成器模式 请引导我得出结论，以解决不被删除的问题

请点击ShowPerson按钮测试程序。将显示联系人并单击删除按钮。您将看到没有执行删除操作

函数元素生成器（名称）{
this.element=document.createElement（名称）；
this.appendSelector=函数（选择器）{
this.appendElement=document.querySelector（选择器）.appendChild（this.element）；
还这个
};
this.setAttribute=函数（属性，值属性）{
this.element.setAttribute（attribute，valueAttribute）
归还这个；
};
this.addEventListener=函数（事件，乐趣）{
this.element.addEventListener（事件，乐趣）；
归还这个；
};
this.text=函数（text）{
this.element.textContent=文本；
归还这个；
};
this.build=function（）{
返回此.element；
};
}
常数生成器={
创建：函数（名称）{
返回新的ElementBuilder（名称）；
}
};
函数电话簿（）{
this.records=[{姓名：“niloufar”，电话：1111}，{姓名：“sara”，电话：2222}，{姓名：“sara”，电话：3333}]；
//功能删除
this.removeContact=函数（）{
const self=this
功能移除人员（项目）{
if（item.target.classList.contains（'delbutton'））{
const-remID=item.target.getAttribute（'data-id'）；
自我记录拼接（remID，1）；
}
}
被罢免人；
}
}
函数渲染（容器）{
this.container=容器；
const phoneBook=新电话簿（）；
const remove=电话簿
.removeContact（）；
this.removentry=（项）=>{
删除（项目）；//
this.showrecords（）；
}
this.init=函数（）{
常量btn=生成器
.创建（“按钮”）
.text（“show person”）
.addEventListener（“单击”，此.showrecords）
.附件选择器（“div”）
.build（）；
};
//功能：从阵列中读取联系人并显示
this.showrecords=（）=>{
const addBookId=document.getElementById（'phone-book-container'）；
设指数=0；
addBookId.innerHTML=''；
const arry=phoneBook.records；
arry.forEach（elm=>{
const nameContent=builder
.create（'p'）
.text（`${elm.name}`）
.附件选择器（“div”）
.build（）；
const phoneContent=builder
.create（'p'）
.text（`${elm.phone}`）
.附件选择器（“div”）
.build（）；
常量锚=生成器
.create（'a'））
.addEventListener（'单击'，此.removeEntry）
.setAttribute（'href'，'#'）
.setAttribute（'class'，'delbutton'）
.setAttribute（“id”、“删除按钮”）
.文本（“删除”）
.setAttribute（'date-id'，`${index}`）
.附件选择器（“div”）
.build（）；
});
}
}
const phoneBookContainer=document.getElementById（“电话簿容器”）；
const app=新渲染（phoneBookContainer）；
app.init（）
您必须将
项
（实际上是
事件
对象）传递给您的函数：


函数元素生成器（名称）{
this.element=document.createElement（名称）；
this.appendSelector=函数（选择器）{
this.appendElement=document.querySelector（选择器）.appendChild（this.element）；
还这个
};
this.setAttribute=函数（属性，值属性）{
this.element.setAttribute（attribute，valueAttribute）
归还这个；
};
this.addEventListener=函数（事件，乐趣）{
this.element.addEventListener（事件，乐趣）；
归还这个；
};
this.text=函数（text）{
this.element.textContent=文本；
归还这个；
};
this.build=function（）{
返回此.element；
};
}
常数生成器={
创建：函数（名称）{
返回新的ElementBuilder（名称）；
}
};
函数电话簿（）{
this.records=[{姓名：“niloufar”，电话：1111}，{姓名：“sara”，电话：2222}，{姓名：“sara”，电话：3333}]；
//功能删除
this.removeContact=函数（）{
const self=this
功能移除人员（项目）{
if（item.target.classList.contains（'delbutton'））{
const remID=item.target.getAttribute（'date-id'）；
自我记录拼接（remID，1）；
}
}
被罢免人；
}
}
函数渲染（容器）{
this.container=容器；
const phoneBook=新电话簿（）；
const remove=电话簿
.removeContact（）；
this.removentry=（项）=>{
删除（项目）；
this.showrecords（）；
}
this.init=函数（）{
常量btn=生成器
.创建（“按钮”）
.text（“show person”）
.addEventListener（“单击”，此.showrecords）
.附件选择器（“div”）
.build（）；
};
//功能：从阵列中读取联系人并显示
this.showrecords=（）=>{
const addBookId=document.getElementById（'phone-book-container'）；
addBookId.innerHT