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

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

这个想法是，在从列表中删除一个项目时，它也会从数组中删除。

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 = [];
deleteArray = [];

//**************************************************************************************************************************************** */
                                                            //FUNCTIONS
//****************************************************************************************************************************************

//***************add income to list********************
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"></i></a>`;

  document.getElementById("listIncomes").appendChild(listItem);
  sumIncomes();
  txtDescripIncome.value = "";
  txtIncomeValue.value = "";

  for(let i = 0; i<spanList.length; i++){
    spanList[i].setattribute("data-id",i)
    console.log(spanList.item(i).innerHTML)
  }

  //***************Delete income from the list********************
  function deleteIncome() {
    const list = document.querySelectorAll(".list-group-item");
    let tab = [],liIndex;

    for (i = 0; i < list.length; i++) {
      tab.push(list[i].innerHTML);
      //console.log(tab);
    }
    for (let i = 0; i < list.length; i++) {
      list[i].onclick = function() {
        liIndex = tab.indexOf(this.innerHTML);
        //console.log(this.innerHTML + "INDEX = " + liIndex);
        deleting();
        list[liIndex].parentNode.removeChild(list[liIndex]);
      };
    }
  }

  deleteIncome();
}

function deleteIncomeFromArray() {}

//***********Sum all Incomes************************
function sumIncomes() {
  let item = txtIncomeValue.value;
  arrayValueIncomes.push(parseInt(item));
  let sum = arrayValueIncomes.reduce((a,b) => a + b);
  span.innerHTML = sum;
}

function deleting() {
  arrayValueIncomes.forEach(function (currentvalue,index,array) {
    let x = currentvalue
    //let nodo = spanList.item(x).dataset.id
    let i = arrayValueIncomes.indexOf(x)
    console.log(i)
    arrayValueIncomes.splice(i,1)
  })
  console.log(arrayValueIncomes)
}


  
  
 

 

//**************************************************************************************************************************************** */
//EVENT LISTENERS
//****************************************************************************************************************************************
btnAdd.addEventListener("click",addIncome);

/* ******************************************************************************************************************************************
                                                        CARD STYLES
 *******************************************************************************************************************************************/
.title-income{
    text-align: center;
}

.card{
    margin-top:30px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 3px 6px rgba(0,0.16),0 3px 6px rgba(0,0.23); 
}

.income-list{
    margin-top:15px;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
    

    <title>Hello,world!</title>
  </head>


  <body>

    <div class="container-fluid">


      <div class="row">
        <div class="col-6">

          <div class="card" style="width: 33rem;">
            <div class="card-body">
              <div class= section-income>
                <div class= title-income>
                  <h2>Month Incomes</h2>
                </div>
                <div class="incomes">
                  <input type="text" placeholder="Income Description" id="descriptionIncome">
                  <input type="text" placeholder="Income Value" id="incomeValue">
                  <button type="button" class="btn btn-success" id="addIncome">Add</button>
                </div>
                <div class="income-list">
                  <ul class="list-group" id="listIncomes">

                  </ul>
                </div>
                <div class = total-income>
                  <span id = "total-money" class = total>0</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>





























    </div>














    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script>
  
   
  </body>
</html>

由于某种原因，该编辑器中未显示删除图标。

在前面的代码中，它不能正常工作，因为在删除项目时，从数组中删除了2个或更多项目，而不是所选的特定项目。

看下面的代码实现完全可以实现预期的效果。.替换代码中的以下脚本块。

<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>

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

struts2010 回答：根据列表中的选定项删除数组元素

大家都在问