时间戳

首页 > 解决方案 > 如何同时从数组和列表中删除值？

javascript - 如何同时从数组和列表中删除值？

问题描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="check()">Remove</button>
    <input type="text" id="rmv" name="rmv">
    <ul id="mylist"></ul>
    <ul id="mylist1"></ul>
    <script type = "text/javascript" src="rmv.js"></script>
</body>
</html>

所以我需要从列表和数组中删除值。是否可以在这里使用 array.filter() 方法或其他任何方法？实际任务是当用户输入值时从列表和数组中删除值

let elements = ["hi",20,67,"hello",21,62,23,"welcome",44,25,1034,"enter"];
    const numbers = elements.filter(element => typeof element === "number")
    let str = elements.filter(element => typeof element === "string")
let lis=document.getElementById("mylist");
let lis1=document.getElementById("mylist1");
str.forEach((item)=>{
    let li =document.createElement("li");
    li.innerText=item;
    lis.appendChild(li);
});
numbers.forEach((item)=>{
    let li =document.createElement("li");
    li.innerText=item;
    lis1.appendChild(li);
});

标签： javascripthtmlarrays

解决方案

我想这就是你要找的。请注意，HTML 已被编辑，现在将同级元素传递给check()函数（请参阅该代码中的注释）。

let elements = ["hi",20,67,"hello",21,62,23,"welcome",44,25,1034,"enter"];
const numbers = elements.filter(element => typeof element === "number");
let str = elements.filter(element => typeof element === "string");
let lis = document.getElementById("mylist");
let lis1 = document.getElementById("mylist1");
str.forEach((item) => {
    let li = document.createElement("li");
    li.innerText = item;
    lis.appendChild(li);
});
numbers.forEach((item) => {
    let li = document.createElement("li");
    li.innerText = item;
    lis1.appendChild(li);
});

function check(el) {
  let toDel;                            // create the variable
  if (isNaN(parseInt(el.value))) {      // if the variable is a string
    for (let x of lis.childNodes) {     // go through the children of the "lis" element
      if (x.innerText === el.value) {   // if the inner text of the child matches our input
        toDel = x;                      // keep the child
        break;                          // stop looping
      }
    }
  } else {                              // if the variable is a number
    for (let x of lis1.childNodes) {    // do the same for "lis1"
      if (x.innerText === el.value) {
        toDel = x;
        break;
      }
    }
  }
  if (!toDel) return;                   // stop here if we didn't find anything
  const delVal =
    isNaN(parseInt(toDel.innerText))    // if the text of the element was a number,
    ? toDel.innerText                   // store it as a number in `delVal`
    : parseInt(toDel.innerText);        
  if (!elements.includes(delVal)) return;         // if the value is not in elements stop here
  elements.splice(elements.indexOf(delVal), 1);   // remove the value from elements
  toDel.remove();                                 // remove the element from the page
  console.log(elements.length, elements);         // log the new array and array length
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- The below line has been edited! -->
    <button onclick="check(this.nextElementSibling)">Remove</button> 
    <input type="text" id="rmv" name="rmv">
    <ul id="mylist"></ul>
    <ul id="mylist1"></ul>
    <script type = "text/javascript" src="rmv.js"></script>
</body>
</html>

推荐阅读