Transfrom a forEach function into for loop, with DOM manipulation

Question

I am practising with DOM manipulation, in this case with .remove(). I get to find all the 'p' in my HTML and remove them, with a forEach function.

     const ps = document.querySelectorAll('p')
    
        ps.forEach(function (p) {
        p.remove()
        })

But for the shake of learning, I would like to transform that forEach into a for Loop, but I am not sure how to fill in the function to make it work . I am trying :

    const ps = document.querySelectorAll('p')
    
    for (i = 0; i < ps.length; i++) {
    
    p.remove()
    
    }

you mean ps[i].remove() , yeah, it worked :) thanks! would you care to explain why inside the forEach, it works with p.remove() ? is it because p is the argument passed inside function(p) ? — notADevYet
– notADevYet, Commented Jul 3, 2021 at 11:16
p is not even defined in your second code. You could use it in your first code because it is a param in your forEach callback. You can do ps[i]. — Tushar Shahi
– Tushar Shahi, Commented Jul 3, 2021 at 11:17

DecPK · Accepted Answer · 2021-07-03 11:31:46Z

1

You just have to use

ps[i].remove()

because ps contains an array of all paragraph. So you want to delete all elements. If you want to access the elements from the array one by one then you have to use index (i.e. on which position they are in an array)

To simulate deletion after 2 second, I've used setTimeout of 2s

With forEach loop

const allP = document.querySelectorAll("p");

setTimeout(() => {
  allP.forEach(p => p.remove())
}, 2000);

<p>1</p>
<p>2</p>
<p>3</p>

With for..loop

const allP = document.querySelectorAll("p");

setTimeout(() => {
  for (let i = 0; i < allP.length; ++i) {
    allP[i].remove();
  }
}, 2000);

<p>1</p>
<p>2</p>
<p>3</p>

edited Jul 3, 2021 at 11:31

answered Jul 3, 2021 at 11:17

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

5 Comments

notADevYet Over a year ago

hey, thanks! that goes even a bit further :)

Roko C. Buljan Over a year ago

@notADevYet it does not, it just uses a setTimeout (for demo purpose) over your coding typo.

notADevYet Over a year ago

I was meaning more like the full and detailed explanation you gave me ;)

DecPK Over a year ago

@notADevYet Please accept the answer if it is what you want...

notADevYet Over a year ago

@decpk I just did it. Sorry, i still need to learn better how this forum works.

Collectives™ on Stack Overflow

Transfrom a forEach function into for loop, with DOM manipulation

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related