Javascript 根据列表中选定的项删除数组元素

我有一个收入列表，每个都有自己的值和自己的删除图标。 将收入添加到列表时，数组将填充其值，然后对这些值求和

其思想是，在从列表中删除项目时，它也将从数组中删除

const txtdescribincome=document.getElementById（“descriptionIncome”）；
const txtIncomeValue=document.getElementById（“incomeValue”）；
const btnAdd=document.getElementById（“addIncome”）；
const span=document.getElementById（“总金额”）；
const spanList=document.getElementsByClassName（'badge-badge-primary-badge-pill'）；
让j；
设ArrayValue=[]；
deleteArray=[]；
//**************************************************************************************************************************************** */
//功能
//****************************************************************************************************************************************
//***************将收入添加到列表中********************
函数addIncome（）{
让descripincome=txtdescriptincome.value；
让IncomeValue=txtIncomeValue.value；
让listItem=document.createElement（“li”）；
让我；
listItem.className=
“列表组项目d-flex对齐项目中心之间的内容”；
listItem.innerHTML=`${DescriptIncome}$${IncomeValue}`；
document.getElementById（“列表项”）.appendChild（列表项）；
sum收入（）；
txtdescripticome.value=“”；
txtIncomeValue.value=“”；
for（设i=0；i a+b）；
span.innerHTML=总和；
}
函数删除（）{
forEach（函数（currentValue、索引、数组）{
设x=当前值
//让nodo=spanList.item（x）.dataset.id
设i=arrayValue.indexOf（x）
控制台日志（i）
阵列值。拼接（i，1）
})
console.log（ArrayValue）
}
//**************************************************************************************************************************************** */
//事件侦听器
//****************************************************************************************************************************************
btnAdd.addEventListener（“单击”，addIncome）
/*******************************************************************************************************************************************
卡片样式
*******************************************************************************************************************************************/
1.所有权收入{
文本对齐：居中；
}
.卡片{
边缘顶部：30px；
边界半径：10px 10px 10px 10px；
盒影：0 3px 6px rgba（0,0,0,0.16），0 3px 6px rgba（0,0,0,0.23）；
}
1.收入表{
边缘顶部：15px；
}

你好，世界！
月收入
添加


0
查看下面的实现，代码完全符合预期。。替换代码中的以下脚本块

<script>

const txtDescripIncome = document.getElementById("descriptionIncome");
const txtIncomeValue = document.getElementById("incomeValue");
const btnAdd = document.getElementById("addIncome");
const span = document.getElementById("total-money");
const spanList = document.getElementsByClassName('badge badge-primary badge-pill');
let j;
let arrayValueIncomes = [];
let total = 0;
deleteArray = [];

function addIncome() {
  let descriIncome = txtDescripIncome.value;
  let IncomeValue = txtIncomeValue.value;
  let listItem = document.createElement("li");
  let i;

  listItem.className = "list-group-item d-flex justify-content-between align-items-center";
  listItem.innerHTML = `${descriIncome} <span class="badge badge-primary badge-pill">$ ${IncomeValue}</span>  <a href="#" class="delete-income" ><i class="far fa-trash-alt">Del</i></a>`;

  document.getElementById("listIncomes").appendChild(listItem);

  txtDescripIncome.value = "";
  txtIncomeValue.value = "";
  listItem.dataset.data = parseFloat(IncomeValue);
  total = parseFloat(total) + parseFloat(listItem.dataset.data);
  listItem.onclick = function() {
    total = total - this.dataset.data;
    this.parentNode.removeChild(this);
    span.innerHTML = total;
    console.log(total);
  };
  console.log(total);
  span.innerHTML = total;
}

btnAdd.addEventListener("click", addIncome);

</script> 


const txtdescripticome=document.getElementById（“descriptionIncome”）；
const txtIncomeValue=document.getElementById（“incomeValue”）；
const btnAdd=document.getElementById（“addIncome”）；
const span=document.getElementById（“总金额”）；
const spanList=document.getElementsByClassName（'badge-badge-primary-badge-pill'）；
让j；
设ArrayValue=[]；
设total=0；
deleteArray=[]；
函数addIncome（）{
让descripincome=txtdescriptincome.value；
让IncomeValue=txtIncomeValue.value；
让listItem=document.createElement（“li”）；
让我；
listItem.className=“列表组项目d-flex对齐项目中心之间的内容”；
listItem.innerHTML=`${DescriptIncome}$${IncomeValue}`；
document.getElementById（“列表项”）.appendChild（列表项）；
txtdescripticome.value=“”；
txtIncomeValue.value=“”；
listItem.dataset.data=parseFloat（IncomeValue）；
总计=parseFloat（总计）+parseFloat（listItem.dataset.data）；
listItem.onclick=函数（）{
总计=总计-this.dataset.data；
this.parentNode.removeChild（this）；
span.innerHTML=总计；
控制台日志（总计）；
};
控制台日志（总计）；
span.innerHTML=总计；
}
btnAdd.addEventListener（“单击”，addIncome）；
一目了然，不要使用tab数组来捕获innerHtml，而是使用它来保存dom元素，这样可以解决问题<代码>选项卡推送（列表[i]）；而不是tab.push（list[i].innerHTML）；if（tab.indexOf（this）>-1）this.parentNode.removeChild（this）；而不是list[liIndex].parentNode.removeChild（list[liIndex]）谢谢你的回答。但问题不在应用程序的行上。现在的问题是从列表中删除一个收入，例如$100，该值不会被删除。您可以在console.log上查看它