Let us create a very simple webpage listing some basic information:
The underlying source is:
Let us suppose now that our objective is to remove the Minecraft element (programmatically). To accomplish this we need to be able to somehow refer to this element inside the program. For this purpose we can give name tags to the individual list items the “li” elements).
The output is (still):
There are many ways to refer to elements. For instance you can refer to them by their id using the getElementById() method. We will use this to remove the second (now the first) element:
The output is now:
We could have used the earlier querySelector method as well to obtain the same effect:
The output will be the same as before, giving Fortnite as the only remaining result.
There are more complex selectors we can use to identify and remove elements which is beyond the scope of this blogpost. But you now have a very good understanding of the basic concepts behind removing elements from a DOM programmatically. Enjoy!
Kodeclik is an online coding academy for kids and teens to learn real world programming. Kids are introduced to coding in a fun and exciting way and are challeged to higher levels with engaging, high quality content.