Javascript 两次或多次从数据列表中添加/删除项时出现问题

各位晚上好,， 因此，我试图让用户添加一个成分列表。有文本输入，他可以键入成分名称或从建议列表中选择（我使用了数据列表输入）。当他单击add按钮时，该项被添加到列表中，并从建议列表（datalist）中删除。当他从列表中删除一个项目时，它将从成分列表中删除并返回到建议列表。 它通常如下所示： 代码运行良好，但只是第一次。当用户从成分列表中删除项目，然后选择要再次添加的项目时，它不会从建议列表中删除。。我认为这是“return”函数中的一个问题

以下是代码片段（尝试将“塑料袋”之类的物品添加到配料中，然后将其移除，然后再次添加）：

函数removietem（list）{//从建议列表中删除项
var item=$（'input#'+list）.val（）；
如果（$（'option[value=“”+item+'“]'））
$（'option[value=“”+item+“]”）。删除（）；
}
函数returnItem（e）{//将项返回到建议列表
var optionVal=$（e）.testest（“td”）.next（）.children（“label”）.html（）；
var newOption=新期权（optionVal）；
$（“#建议”）。追加（新选项）；
}
函数addingredent（e）{//将项添加到成分列表中
var inputContent=document.getElementById（“addIngreField”）.value；
如果（输入内容！=“”）{
var table=document.getElementById（“成分”）；
var row=table.insertRow（table.rows.length-1）；
var cell1=行插入单元格（0）；
cell1.style.textAlign=“left”；
cell1.innerHTML=“”；
var cell2=行插入单元格（1）；
cell2.innerHTML=“+inputContent+”；
document.getElementById（“addIngreField”）.value=“”；
}
};
函数removeingreement（e）{//从成分列表中删除项
var row=e.parentNode.parentNode；
row.parentNode.removeChild（row）；
}

.ingred{
显示：块；
位置：相对位置；
宽度：200px；
边缘底部：12px；
字体大小：20px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
颜色：黑色；
字体系列：“Muli Reg”；
}
阿丁格尔先生{
光标：指针；
大纲：无；
高度：30px；
宽度：30px；
边界半径：50%；
边界：无；
背景颜色：绿色；
线高：5px；
颜色：白色；
字号：18px；
字体大小：粗体；
字体系列：“Muli Reg”；
}
.Removeire{
光标：指针；
大纲：无；
高度：30px；
宽度：30px；
边界半径：50%；
边界：无；
背景色：#cc0000；
线高：5px；
颜色：白色；
字号：18px；
字体大小：粗体；
字体系列：“Muli Reg”；
}
艾德斯特先生{
光标：指针；
大纲：无；
高度：25px；
宽度：25px；
边界半径：50%；
边界：无；
背景颜色：绿色；
颜色：白色；
字号：18px；
字体大小：粗体
}
removeSte先生{
光标：指针；
大纲：无；
不透明度：0.5；
高度：25px；
宽度：25px；
边界半径：50%；
边界：无；
背景色：#cc0000；
颜色：白色；
字号：18px；
字体大小：粗体
}
.Removeire:悬停{
不透明度：1；
}
.removeSte:悬停{
不透明度：1；
}
#加{
光标：指针；
}
#逐步稳定{
计数器复位：行数；
}
#逐步稳定tr{
计数器增量：行数；
}
#stepsTable tr td:n个孩子（2）：：之前{
内容：计数器（行数）；
}
输入：焦点：：-webkit输入占位符{
颜色：透明；
}
输入：焦点：-moz占位符{
颜色：透明；
}
/*FF 4-18*/
输入：焦点：：-moz占位符{
颜色：透明；
}
/*FF 19+*/
输入：焦点：-ms输入占位符{
颜色：透明；
}
/*IE 10+*/
textarea:focus:：-webkit输入占位符{
颜色：透明；
}
text区域：焦点：-moz占位符{
颜色：透明；
}
/*FF 4-18*/
文本区域：焦点：：-moz占位符{
颜色：透明；
}
/*FF 19+*/
文本区域：焦点：-ms输入占位符{
颜色：透明；
}
/*IE 10+/

配料

下一个

再次创建选项时，需要添加value属性<代码>新选项（optionVal，optionVal）

函数removietem（list）{//从建议列表中删除项
var item=$（'input#'+list）.val（）；
如果（$（'option[value=“”+item+'“]'））
$（'option[value=“”+item+“]”）。删除（）；
}
函数returnItem（e）{//将项返回到建议列表
var optionVal=$（e）.testest（“td”）.next（）.children（“label”）.html（）；
var newOption=新期权（optionVal，optionVal）；
$（“#建议”）。追加（新选项）；
}
函数addingredent（e）{//将项添加到成分列表中
var inputContent=document.getElementById（“addIngreField”）.value；
如果（输入内容！=“”）{
var table=document.getElementById（“成分”）；
var row=table.insertRow（table.rows.length-1）；
var cell1=行插入单元格（0）；
cell1.style.textAlign=“left”；
cell1.innerHTML=“”；
var cell2=行插入单元格（1）；
cell2.innerHTML=“+inputContent+”；
document.getElementById（“addIngreField”）.value=“”；
}
};
函数removeingreement（e）{//从成分列表中删除项
var row=e.parentNode.parentNode；
row.parentNode.removeChild（row）；
}

.ingred{
显示：块；
位置：相对位置；
宽度：200px；
边缘底部：12px；
字体大小：20px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
颜色：黑色；
字体系列：“Muli Reg”；
}
阿丁格尔先生{
光标：指针；
大纲：无；
高度：30px；
宽度：30px；
边界半径：50%；
边界：无；
背景-