You are trying to remove an HTML tag using JavaScript’s remove() method. And the result is that the HTML tag cannot be removed, but an additional “TypeError: Cannot read property ‘remove’ of undefined“ in Javascript error appears. So how to know this error, why it appears, and how to solve it, see our article below.
Why does the “TypeError: Cannot read property ‘remove’ of undefined” in Javascript occur?
To better understand the error, we will give some examples and how it appears.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example</title>
</head>
<body>
<p class="content">LearnShareIT 1</p>
<p class="content">LearnShareIT 2</p>
</body>
<script src="main.js"></script>
</html>In file main.js
var element = document.getElementsByClassName("title");
console.log(element[0].remove());Output:
Uncaught TypeError: Cannot read properties of undefined (reading 'remove')document.getElementsByClassName(“title”) with the class name you want to get is ‘title’, but in HTML, there is no tag with a class name of ‘title’, so it will return an empty HTMLCollection. You want to get the element by indexing to use the remove() method to remove the element. However, an empty HTMLCollection is like an empty array. When you access it based on the index, it returns undefined; if you try to use the undefined value to use the remove() method to remove the HTML element, it gives an error.
The root cause of the “TypeError: Cannot read property ‘remove’ of undefined” in Javascript is that you try to use the undefined value and the remove() method on that value.
How to fix the “TypeError: Cannot read property ‘remove’ of undefined” in Javascript?
Use the !== operator
The !== operator is another used to compare differences, including values and data types.
Example:
var element = document.getElementsByClassName("content");
if (element[0] !== undefined) {
// Remove the first node
element[0].remove();
console.log("Remove success!");
} else {
console.log("Remove failed");
}Output:
Remove success!Use the HTML code in the above example.
Before using the remove() method to remove the element, we check the value first. If the value is undefined (this is what causes the error), then we don’t allow the use of the remove() method to avoid causing an error.
Use length attribute
In file main.js
var element = document.getElementsByClassName("content");
if (element.length > 0) {
// Remove the first node
element[0].remove();
console.log("Remove success!");
} else {
console.log("Remove failed");
}Output:
Remove success!Use the HTML code in the above example.
We use the length property to check if an element exists in the HTMLCollection. If yes, then when we access by indexing to the elements in HTMLCollection, the return value is always different from undefined.
And that’s how we solve the error.
Summary
To avoid the “TypeError: Cannot read property ‘remove’ of undefined” in Javascript, you must ensure that the value is not undefined and then allow the remove() method to remove the element. In this article, we have shown you two ways to solve it and explained them in detail. If you are facing some other error, look for it in the search bar on our website, we have many such articles which will be very helpful for you.
Maybe you are interested:
- Cannot read property ‘style’ of Undefined in JavaScript
- Cannot read property ‘includes’ of Undefined in JavaScript
- TypeError: Cannot read property ‘offsetTop’ of Null in JS
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css
