Unable to access properties of an unknown item (reading 'remove')

Question

Unable to access properties of an unknown item (reading 'remove')

Can you provide guidance on how to remove the top-level parent element of a div? I've been attempting to delete the main parent element of a specific 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

Answer 1

Answer №1

Initially, it appears that in your innerHTML, the last div tag is not properly closed (it should be </div>).

Additionally, within the deleteItem function, e.currentTarget does not exist. Instead, you should use e.target.parentElement to access the parent node.

Lastly, why are you setting type="button" in the button element? As it is already a button element by default!

Below is an altered version of the code with the mentioned corrections:

// 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();
}

Answer 2

Initially, it appears that in your innerHTML, the last div tag is not properly closed (it should be </div>).

Additionally, within the deleteItem function, e.currentTarget does not exist. Instead, you should use e.target.parentElement to access the parent node.

Lastly, why are you setting type="button" in the button element? As it is already a button element by default!

Below is an altered version of the code with the mentioned corrections:

// 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();
}

Answer 3

Answer №2

Take a look at my experiment, first I corrected your HTML tag. The last div should be </div> instead of <div>. After that, I made some improvements to your code by making it more dynamic. I iterated over each button class in the POST section and added an event for every element.

let text = "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 container = document.getElementById("data");
    container.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> ${text}</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> ${text}</p>
    </div>  
    
    </div>
    `

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

for(var j = 0; j < buttons.length; j++){
  // Log the clicked <p> element
  buttons[j].addEventListener('click', hide, false);
}
// Log <body>

function hide(event){
  event.currentTarget.parentNode.parentElement.remove();
}

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

Does this solution meet your requirements?

Answer 4

Take a look at my experiment, first I corrected your HTML tag. The last div should be </div> instead of <div>. After that, I made some improvements to your code by making it more dynamic. I iterated over each button class in the POST section and added an event for every element.

let text = "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 container = document.getElementById("data");
    container.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> ${text}</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> ${text}</p>
    </div>  
    
    </div>
    `

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

for(var j = 0; j < buttons.length; j++){
  // Log the clicked <p> element
  buttons[j].addEventListener('click', hide, false);
}
// Log <body>

function hide(event){
  event.currentTarget.parentNode.parentElement.remove();
}

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

Does this solution meet your requirements?

Unable to access properties of an unknown item (reading 'remove')

Answer №1

Answer №2

Similar questions

What is the best way to modify the values in an initialized array once the fetchData method has been executed?

What could be causing the input event not to be triggered consistently when I select or highlight text?

Is there a way to validate form input before inserting it into a database using the onsubmit event?

The usage of an import statement is not permissible outside of a module

Moving object sideways in 100px intervals

Choose a random cell in Jquery every second

Creating a versatile TailwindCSS grid that can adjust to varying numbers of grid columns

Determine the Button's State by Monitoring Changes in the TextBox Text

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

The AJAX call failed because the web service was not properly configured, resulting in a missing parameter value being

MongoDB was successfully updated, however the changes are not being displayed on the redirected

``There is an issue with the Nodejs required module variable not updating even after deleting

Tips for loading and updating data simultaneously in VUEJS from a single input

The issue of array sorting, specifically the function(a, b) {return b.value - a.value), is causing some

The Child/Parent arguments in Typescript methods cannot be assigned

Utilizing slug URLs effectively in Next.js

The sequence of divs in a language that reads from right to left

How to resolve undefined callback when passing it to a custom hook in React Native

The jsonGenerator is unable to process strings containing spaces

Unable to bind `this` using `call` method is not functioning as expected