# Selecting DOM Elements

**URL:** <https://forum.kirupa.com/t/selecting-dom-elements/651806>\
**Category:** web dev\
**Created:** [May 9, 2022, 5:22pm UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806 "2022-05-09T17:22:16Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![Zach\_Lipscomb](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zach_lipscomb/32/17606_2.png) [@Zach\_Lipscomb](https://forum.kirupa.com/u/Zach_Lipscomb)\
**Post date:** [May 31, 2022, 12:32am UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/21 "2022-05-31T00:32:36Z")

</div>

lol 🙂 thank you. Your input has been a tremendous help as I learn.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 1, 2022, 3:43pm UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/22 "2022-06-01T15:43:59Z")

</div>

Completely forgot. Were you also able to resolve the issue around removing multiple elements at once? 🙂

---

<div class="post-metadata">

**Author:** ![Zach\_Lipscomb](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zach_lipscomb/32/17606_2.png) [@Zach\_Lipscomb](https://forum.kirupa.com/u/Zach_Lipscomb)\
**Post date:** [June 2, 2022, 2:43am UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/23 "2022-06-02T02:43:52Z")

</div>

Not yet , ive been tinkering but nothing seems to solve the issue. I deployed the app here for testing  
[https://ezmanagers.com/Projects/Timeline/index.html](https://ezmanagers.com/Projects/Timeline/index.html)

ive been researching promises await and async , to use it in the foreach loop when it iterates to remove the selected items. I haven’t solved how to implement it yet.

```auto
function removeElement() {
// somehow implement async/await to removal selected items at the same time. 
    for (let i = 0; i < selected.length; i++) {
        selected[i].remove()
    } 
}

```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 2, 2022, 3:35am UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/24 "2022-06-02T03:35:20Z")

</div>

This may be worth a shot - try removing the items in reverse:

```auto
function removeElement() {
// somehow implement async/await to removal selected items at the same time. 
    for (let i = selected.length - 1; i >= 0; i--) {
        selected[i].remove()
    } 
}

```

---

<div class="post-metadata">

**Author:** ![Zach\_Lipscomb](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zach_lipscomb/32/17606_2.png) [@Zach\_Lipscomb](https://forum.kirupa.com/u/Zach_Lipscomb)\
**Post date:** [June 6, 2022, 7:38pm UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/25 "2022-06-06T19:38:20Z")

</div>

It Worked! Removing in reverse order did the job. I don’t understand why just yet, but it did. I guess its time to do some research. Thanks for the suggestion.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 6, 2022, 8:00pm UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/26 "2022-06-06T20:00:05Z")

</div>

@senocular can go into more detail here, but the TL;DR is that you want to ensure the list you are iterating through does not change from under you.

When you are getting a list of items using something like **getElementsByClassName** , you are getting a live collection of DOM elements. When you remove an element (or add an element), the list of items updates in real-time. This means that while you are looping through your items, the list is updating as each item gets removed.

Going in reverse doesn’t change your list from getting updated, but it is updating in your favor. The item that is removed from your list is the same as the item you just removed.

One way of addressing this problem is to use `querySelectorAll` to find all of your DOM elements that are selected. The `querySelectorAll` method doesn’t return a live list of impacted DOM elements/nodes. This means you removing DOM elements won’t impact the contents of your list that you are iterating through 🙂

> **[Finding Elements In The DOM Using querySelector](https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.htm)**
>
> Learn how to target elements in the DOM using just a little bit of JavaScript, the querySelector function, and an honest-to-goodness CSS selector.

---

<div class="post-metadata">

**Author:** ![Zach\_Lipscomb](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/zach_lipscomb/32/17606_2.png) [@Zach\_Lipscomb](https://forum.kirupa.com/u/Zach_Lipscomb)\
**Post date:** [June 6, 2022, 11:18pm UTC](https://forum.kirupa.com/t/selecting-dom-elements/651806/27 "2022-06-06T23:18:58Z")

</div>

Ahhh I see. I enjoyed the article and again learned something new! I refactored my code to use the `querySelector` and `querySelectorAll` commands and will only use these going forward. Being able to use attribute selectors within the commands is pretty slick. I can pretty much grab anything I want in the DOM with those two commands .

[Previous page](https://forum.kirupa.com/t/selecting-dom-elements/651806.md?page=1)