JavaScript error: Uncaught TypeError: Cannot read property 'remove' of undefined

Question

I have a script to remove uploaded files after Add to success, but I get this error on site when it loads.

"Uncaught TypeError: Cannot read property 'remove' of undefined"

What's missing?

<script>
onload=function() {
    document.querySelectorAll("li[id^='uploadNameSpan']")[0].remove();
}
</script>

Possible duplicate of Uncaught TypeError: Cannot read property 'value' of undefined — Matthew Sainsbury
– Matthew Sainsbury, Commented Jun 26, 2016 at 20:10
Either the selector is wrong...or elements are added after code runs. If it's the latter need to show how they get added. All the explanations why it fails don't get you to solution to make it work — charlietfl
– charlietfl, Commented Jun 26, 2016 at 20:23

nem035 · Accepted Answer · 2016-06-27 00:32:00Z

12

Basically, your issue is that, at the time you call this code, you don't have any elements in the DOM corresponding to the query "li[id^='uploadNameSpan']". So querySelectorAll returns an empty NodeList which has undefined at the 0 position (or any position for that matter).

Breakdown of what is happening:

var liElements = document.querySelectorAll("li[id^='uploadNameSpan']"); // this returns an empty NodeList

var nonExistentFirstElement = liElements[0]; // this is undefined, there's nothing at the first position

nonExistentFirstElement.remove(); // thus, this is an error since you're calling `undefined.remove()`

Depending on your use case, one thing you can do is have a check for the amount of items returned before trying to remove:

var liElements = document.querySelectorAll("li[id^='uploadNameSpan']");
if (liElements.length > 0) {
  liElements[0].remove();
}

In general, you have to make sure to have the element in the DOM at the time you are trying to remove it.

edited Jun 27, 2016 at 0:32

answered Jun 26, 2016 at 20:14

nem035

35.5k6 gold badges93 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charlietfl Over a year ago

this returns [] not really accurate ... is elementList not array

nem035 Over a year ago

@charlietfl its array-like and irrelevant for this particular problem but you're right. I've actually written that down first and then edited the question to simplify it. Switched it back now.

Ronni Over a year ago

This seems to work perfect. No script error and functions like it should. Thank you so much

Prabuddha Kulatunga Over a year ago

for me, I had to use if( liElements != null ) instead of if(liElements.length > 0)

nem035 Over a year ago

@PrabuddhaKulatunga that's likely because you used querySelector instead of querySelectorAll

Collectives™ on Stack Overflow

JavaScript error: Uncaught TypeError: Cannot read property 'remove' of undefined

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related