Javascript 从数组中筛选对象，其中键为；ID"；==元素id不工作

我有一个

React

HTML5

拖放功能

我对删除名单（卡片）有意见

当我使用

event.target.parentnode.id

中的id时，我不会在列表

对象数组中筛选出该对象。如果我手动输入要删除的id，它将正常工作。我错过了什么

请原谅代码混乱：）
这是处理筛选器的代码片段


  //remove list if user clicked the 'X'
    if (event.target.id == "remove_list") {
      //event.target.parentNode.id
      console.log("before", lists)
      const a = lists.filter(function (obj) {
        return obj.id !== event.target.parentNode.id;
      });
      setlists(a)
      console.log("after", lists)
      await Populate_list_containers()

    }

完整代码如下，以供参考


style.scss

.testing{

  $box_radius: 7px;
.board_area{

    background-color:rgba(199,221,255,255)
    ;
    height: 250px;
    width: 100%;
    padding:10px;
    display: flex;
    overflow:auto;
}

.list{
  padding:6px;
  text-align: center;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
    background-color:#ededed;
    min-height: 70px !important;
    width: 180 !important;
margin: 10px;
border-radius: $box_radius;
display: "flex";
}

.list_containter{
    background-color:rgba(128, 128, 128, 0.0);
    min-height: 70px !important;
    height: 100% !important;
    width: 200px !important;
    margin-left: 10px;
    overflow-y:auto;
    overflow-x:hidden;
    flex-shrink: 0;

    max-height: 100%;


}

.add_list{
  padding:5px;
border-radius: $box_radius;
  background-color:rgba(0, 0, 0, 0.1);
    height: 30px !important;
    width: 180px !important;
margin: 10px;
color: white;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
}



index.js

import "./style.scss"
import $ from 'jquery';
function main() {
  const [draging_element, setdraging_element] = useState(<div></div>)
  const [board, setboard] = useState(<div></div>)

  const [nameaa, setnameaa] = useState("a")

  const [lists, setlists] = useState(
  [
    {
      id: 1,
      name: "List 1"
    },
    {
      id: 2,
      name: "List2"
    }
  ]
  )

  var currentElement, currentDropzone, offsetX, offsetY;
  var test
  var dragging_element_save_state
  function findZoneUnderPoint(x, y) {
    var dropzones = document.querySelectorAll(".dropzone");
    for (var i = 0; i < dropzones.length; i++) {
      var box = dropzones[i].getBoundingClientRect();
      if (x > box.left && x < box.right && y > box.top && y < box.bottom) {
        return dropzones[i];
      }
    }
  }
  async function onMouseDown(event) {
    currentElement = event.target.closest(".draggable");
//remove list if user clicked the 'X'
if (event.target.id == "remove_list"){
  //event.target.parentNode.id
  console.log("before",lists)
  const a = lists.filter(function( obj ) {
    return obj.id !== event.target.parentNode.id;
});
setlists(a)
console.log("after",lists)
  await Populate_list_containers()
}else {
    //setdraging_element(currentElement)
    if (currentElement) {
      document.body.classList.add("noselect")
      var box = currentElement.getBoundingClientRect();
      currentElement.style.transform = "rotate(5deg)";
      offsetX = event.clientX - box.x;
      offsetY = event.clientY - box.y;
      currentElement.classList.add("drag");
      //currentElement.style.width = box.width.toFixed() + "px";
      // currentElement.style.height = box.height.toFixed() + "px";
     // currentElement.style.left = (event.clientX - offsetX) + "px";
    //  currentElement.style.top = (event.clientY - offsetY) + "px";
    currentElement.style.left =event.clientX-40
    currentElement.style.top = event.clientY-20
      currentElement.style.position = "fixed";
      currentElement.style.zIndex = "999";
      this.addEventListener("mousemove", onMouseMove);
      this.addEventListener("mouseup", onMouseUp);
      // setdraging_element(currentElement)
    }}
  }
  function onMouseMove(event) {
  //  document.body.style.cursor = "grabbing"

    currentElement.style.left = (event.clientX - offsetX) + "px";
    currentElement.style.top = (event.clientY - offsetY) + "px";
    var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
    if (dropzone !== currentDropzone) {
      if (dropzone) {

        if (dropzone.childNodes[0] != currentElement) {
          //  console.log("in",)
          dropzone.childNodes[0].style.transform = "rotate(-5deg)";
          test = dropzone
        }
        // -> drag enter zone
      }
      if (currentDropzone) {
        if (currentDropzone.childNodes[0] != currentElement) {
          currentDropzone.childNodes[0].style.transform = "";
          //   console.log("out",currentDropzone.childNodes[0])
        }
        // -> drag leave zone
      }
      currentDropzone = dropzone;
    }
    // dropzone.style.transform = "rotate(-5deg)";
  }
  function onMouseUp(event) {
    if (test != undefined) {
      test.childNodes[0].style.transform = ""
    }
    document.body.classList.remove("noselect")
    currentElement.style.transform = "";
    currentElement.style.position = "relative";
    currentElement.style.left = 0
    currentElement.style.top = 0
    currentElement.style.cursor =""
    //console.log("this: ",test)
    var dropzone = findZoneUnderPoint(event.clientX, event.clientY);

    if (dropzone) {
      // -> drag complete
      if (dropzone.hasChildNodes) {
        // -> drag complete - Already has a list
        var origin_list_container = currentElement.parentNode
        var desitination_list = dropzone.childNodes[0]
        origin_list_container.append(desitination_list)
        dropzone.append(currentElement)
      }
      else {
        dropzone.append(currentElement)
        // -> drag complete - Does not have a list
      }
    }
    else {
      // -> drag canceled // Not in drop Zone
    }
    currentElement = null;
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);

  }

  function Populate_list_containers() {
    var list_conatiners = lists.map(list =>
      <div id={"container_" + list.id} className="dropzone list_containter">
        <div id={list.id} className="draggable list">{list.name}
        <div id="remove_list"   style={{textAlign:"right",float: "right"}}>X</div>
        
        </div>
      </div>
    )
    var add_list = <input onKeyPress={testkeypress} id="add_list" placeholder='Add a list...' type="text" className="add_list"></input>
    setboard(<div style={{ display: "flex" }}>{list_conatiners}{add_list}</div>)
    //return 
  }
  const [count, setCount] = React.useState(0);

function testkeypress(event){
  if (event.key === "Enter") {

    var tempa =  {
      id:lists.length,
      name:event.target.value
          }
            lists.push(tempa)

            Populate_list_containers()

  console.log("before: ",event.target.value)
  event.target.value =''
  console.log("after: ",event.target.value)
  }
}

  useEffect(() => {
    let isMounted = true
    setCount(100);
    async function a() {
      await Populate_list_containers()
    }
    a()
  }, [count])
    // runs once on page load. Due to the '[]'
  //append(container)
document.addEventListener("mousedown", onMouseDown);
//console.log("sdsdsdruning again ")
  return <div className="testing">
    <div className="board_area">
      {board}


    </div>
  </div>

}

export default main;


导入“/style.scss”
从“jquery”导入美元；
函数main（）{
常量[draging_元素，setdraging_元素]=useState（）
const[board，setboard]=useState（）
const[namea，setnamea]=useState（“a”）
const[lists，setlists]=useState(
[
{
id:1，
姓名：“名单1”
},
{
id:2，
名称：“列表2”
}
]
)
var currentElement、currentDropzone、offsetX、offsetY；
var检验
变量拖动\u元素\u保存\u状态
函数findZoneUnderPoint（x，y）{
var dropzone=document.querySelectorAll（“.dropzone”）；
对于（var i=0；ibox.left&&xbox.top&&y拖动进入区域
}
if（currentDropzone）{
if（currentDropzone.childNodes[0]！=currentElement）{
currentDropzone.childNodes[0]。style.transform=“”；
//console.log（“退出”，currentDropzone.childNodes[0]）
}
//->拖离区
}
currentDropzone=dropzone；
}
//dropzone.style.transform=“旋转（-5度）”；
}
函数onMouseUp（事件）{
如果（测试！=未定义）{
test.childNodes[0]。style.transform=“”
}
document.body.classList.remove（“noselect”）
currentElement.style.transform=“”；
currentElement.style.position=“相对”；
currentElement.style.left=0
currentElement.style.top=0
currentElement.style.cursor=“”
//log（“this:，test）
var dropzone=findZoneUnderPoint（event.clientX，event.clientY）；
if（dropzone）{
//->拖动完成
if（dropzone.hasChildNodes）{
//->拖动完成-已经有一个列表
var origin\u list\u container=currentElement.parentNode
var Destination_list=dropzone.childNodes[0]
来源列表容器。附加（目的列表）
dropzone.append（currentElement）
}
否则{
dropzone.append（currentElement）
//->拖动完成-没有列表
}
}
否则{
//->已取消拖动//不在拖放区
}
currentElement=null；
文件。删除EventListener（“mouseup”，onMouseUp）；
document.removeEventListener（“mousemove”，onMouseMove）；
}
函数填充\u列表\u容器（）{
var list\u conatiners=lists.map（list=>
{list.name}
X
)
变量添加列表=
设置板（{list_conatinters}{add_list}）
//返回
}
const[count，setCount]=React.useState（0）；
函数testkeypress（事件）{
如果（event.key==“输入”）{
var tempa={
id:lists.length，
名称：event.target.value
}
lists.push（tempa）
填充\u列表\u容器（）
log（“before:”，event.target.value）
event.target.value=“”
log（“之后：”，event.target.value）
}
}
useffect（（）=>{
让isMounted=true
设置计数（100）；
异步函数a（）{
等待填充\u列表\u容器（）
}
()
}，[计数]）
//在页面加载时运行一次。由于“[]”
//附加（容器）
文件。添加了文本列表（“鼠标向下”，onMouseDown）；
//console.log（“再次调整sdrunning”）
返回
{董事会}
}
导出默认主；

比较前将值转换为字符串

const a = lists.filter(function (obj) {
        return obj.id.toString() !== event.target.parentNode.id.toString();
      });

我不确定这是否会奏效，但我怀疑它会奏效

编辑：这可能会更好：

let PostionToDelete = undefined;
lists.forEach((l, i)=>{
    if(l.id.toString() === event.target.parentNode.id.toString()){
        PositionToDelete = i;
    }
}
if(PostionToDelete){
    lists.splice(PostionToDelete, 1);
}
else{
    console.log(`Could not delete thing with id ${event.target.parentNode.id}`);
}