calling the same function with different variables - simplifying the code

Question

function removeIcons(x) {
  x.forEach(function (element) {
  element.remove()
  })
}

removeIcons(document.querySelectorAll(".film-icon"))
removeIcons(document.querySelectorAll(".music-icon"))
removeIcons(document.querySelectorAll(".book-icon"))
removeIcons(document.querySelectorAll(".software-icon"))
removeIcons(document.querySelectorAll(".smile-icon"))
removeIcons(document.querySelectorAll(".article-icon"))

How can I write it simplier? I mean, the name of the function shouldn't repeat.

Just select all elements with a single selector? removeIcons(document.querySelectorAll(".film-icon,.music-icon,.book-icon,...")) — Felix Kling
– Felix Kling, Commented Apr 27, 2020 at 12:03
You could also incorporate the querySelectorAll into your function: if(typeof x==='string') x = document.querySelectorAll(x);. That way you can call it with a string or NodeList — David784
– David784, Commented Apr 27, 2020 at 12:06
If only those icons use class names ending on -icon, you can have a more concise selector for all icons: '[class$="-icon"]' — connexo
– connexo, Commented Apr 27, 2020 at 12:06
Thanks to everyone, I'm very grateful for your help. fjc, I had no idea how to go about it. I couldn't find anything on Google. Felix Kling and Mamun - that seems to me the best solution. David784 - very interesting, I'll keep that in mind. Connexo - I'll use that too. — reti
– reti, Commented Apr 28, 2020 at 9:52

Mamun · Accepted Answer · 2020-04-27 12:09:42Z

2

You can target all the elements at once by specify the classes separated by comma using Document.querySelectorAll():

removeIcons(document.querySelectorAll(".film-icon, .music-icon, .book-icon, .software-icon, .smile-icon, .article-icon"));

edited Apr 27, 2020 at 12:09

answered Apr 27, 2020 at 12:05

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

connexo Over a year ago

It's either Document.prototype.querySelectorAll or document.querySelectorAll. querySelectorAll is not a static method.

Hien Nguyen · Accepted Answer · 2020-04-27 12:11:11Z

2

You can use map to do your task as

var iconlist = [".film-icon", ".music-icon", ".book-icon", ".software-icon", ".smile-icon", ".article-icon"];
iconlist.map(item => removeIcons(document.querySelectorAll(item));

answered Apr 27, 2020 at 12:11

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

2 Comments

Dejke Over a year ago

I think forEach is more appropriate. Map works, but it is generally used when you want to apply a function to every item and create a new list with them. Since we are not using the return value from returnIcons, forEach fits.

reti Over a year ago

Hien Nguyen and Dejke. Thanks a lot for yur answers. I haven't got enough knowledge to comment on what you wrote. This arrow (=>) I have already seen on a course and at the beginning I suspected it would be part of the solution to my problem, but the solution proposed by Felix Kling and Mamun appeals most to me.

Collectives™ on Stack Overflow

calling the same function with different variables - simplifying the code

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related