无法读取未定义的属性（读取“删除”）答案

【问题标题】：Cannot read properties of undefined (reading 'remove')无法读取未定义的属性（读取“删除”）
【发布时间】：2021-09-14 19:05:02
【问题描述】：

如何删除 div 的* parentElement。我一直在尝试删除 div 的顶部父元素。

element.innerHTML = `
<div class="postIt-item">
    <div class="postIt-item-btn-container"> 
    <button  class="btn-delete" type="button"><i class="fa fa-trash" aria-hidden="true"></i></button>
    <button  class="btn-edit" type="button"><i class="fa fa-pencil" aria-hidden="true"></i></button>
    </div>  
  <p> ${value}</p>
<div> `

const deletebtn = element.querySelector('.btn-delete');
deletebtn.addEventListener('click', deleteItem);

//delete function 
function deleteItem(e) {

  const element = e.currentTarget.parentElement.parentElement;
  e.parentElement.remove(); // 
}

【问题讨论】：

标签： javascript

【解决方案1】：

首先，在您的innerHTML 中，最后一个div 没有被关闭（应该是</div>）。

其次，在deleteItem 函数中e.currentTarget 不存在。您必须使用e.target.parentElement 来获取父节点。

最后为什么要在按钮元素中设置type="button"？不是已经是按钮了吗！

这是我的工作解决方案。

// I added later for testing in the browser---------\
const value = "Some value here";
const element = document.createElement("div");
// -------------------------------------------------/

element.innerHTML = `
<div class="postIt-item">
  <div class="postIt-item-btn-container">
    <button class="btn-delete">Delete</button>
    <button class="btn-edit">Edit</button>
  </div>
  <p>${value}</p>
</div>
`;

document.body.appendChild(element);

const deleteButton = element.querySelector(".btn-delete");
deleteButton.addEventListener("click", deleteItem);

//delete function
function deleteItem(e) {
  const parent = e.target.parentElement;
  parent.remove();
}

【讨论】：

【解决方案2】：

看看我的实验，首先我修复了你的 html 标签，最后一个 div 应该是 </div> 而不是 <div>，然后我对你的代码做了一些改进，我做了超过 1 个 POST，我循环POST 中的每个按钮类，然后为每个元素添加事件。

let value = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ";
    let element = document.getElementById("data");
    element.innerHTML = `
    <div id="list-post">
    <div class="postIt-item">
    POST 1
        <div class="postIt-item-btn-container"> 
        <button  class="btn-delete" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Delete</button>
        <button  class="btn-edit" type="button"><i class="fa fa-pencil" aria-hidden="true"></i>Edit </button>
        </div>  
      <p> ${value}</p>
    </div> 
    
        <div class="postIt-item">
          POST 2
        <div class="postIt-item-btn-container"> 
        <button  class="btn-delete" type="button"><i class="fa fa-trash" aria-hidden="true"></i>Delete</button>
        <button  class="btn-edit" type="button"><i class="fa fa-pencil" aria-hidden="true"></i>Edit </button>
        </div>  
      <p> ${value}</p>
    </div>  
    
    </div>
    `

var ps = document.getElementsByClassName('btn-delete');

for(var i = 0; i < ps.length; i++){
  // console: print the clicked <p> element
  ps[i].addEventListener('click', hide, false);
}
// console: print <body>

function hide(e){
  e.currentTarget.parentNode.parentElement.remove();
  // When this function is used as an event handler: this === e.currentTarget
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<div id="data"></div>

这是您正在寻找的解决方案吗？

【讨论】：