Efficiently Dynamically Add and Remove Div Boxes with Vanilla JS

Описание: Learn how to effectively manage div elements in your UI by using JavaScript to dynamically add and remove them based on checkbox selections without relying on frameworks like React.
---
This video is based on the question https://stackoverflow.com/q/64349212/ asked by the user 'Marius' ( https://stackoverflow.com/u/10513206/ ) and on the answer https://stackoverflow.com/a/64349588/ provided by the user 'Lakshya Thakur' ( https://stackoverflow.com/u/8130690/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Vanilla JS to dynamically add or remove div boxes

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Dynamically Add and Remove Div Boxes with Vanilla JS

In the world of web development, dynamically managing user interface components can really enhance user experience. If you've ever found yourself needing to dynamically add or remove elements—like div boxes—based on user actions (like checking or unchecking a checkbox), you're in the right place! This guide will guide you through how to achieve this using only Vanilla JavaScript, without any frameworks or libraries.

The Problem

Imagine you have a set of checkboxes, and each checkbox represents a div box that you want to display on your webpage. When the user checks a checkbox, a new div box should appear, and when unchecked, the corresponding div box should disappear.

Common Issues:

Multiple boxes getting added even when only one checkbox is checked.

Boxes still appearing after the checkbox is unchecked.

The Solution

To solve these issues, we'll create a simple JavaScript code snippet that does the following:

Track the state of checkboxes: We will use an array to keep track of which checkboxes are checked.

Update the DOM accordingly: We will clear the existing boxes and then render only those that correspond to the checked checkboxes.

Sample Code

Let's break down the solution with code example:

HTML Structure

First, set up your HTML with checkboxes and a div to hold the boxes:

[[See Video to Reveal this Text or Code Snippet]]

JavaScript Logic

Now, let's look at the JavaScript:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Initialization: We start by waiting for the window to load, then get all checkboxes and initialize an empty state array.

Event Listener: For each checkbox, we add an event listener that is triggered on change:

If checked, we add the checkbox id to the state array.

If unchecked, we remove it from the state array.

After each change, we call renderOnDom(state) to update the interface.

Resetting the DOM: The resetDom function clears all existing child elements inside the projects div to prevent the accumulation of boxes.

Rendering Divs: The renderOnDom function takes the current state. It first resets the DOM and then creates a new div for each checked checkbox, appending them to the projects container.

Conclusion

By following the above steps, you can effectively manage the dynamic addition and removal of div boxes based on user interactions. This approach adheres to the core principles of Vanilla JavaScript, giving you a deeper understanding of DOM manipulation without the reliance on frameworks.

Feel free to modify and experiment with the code to suit your needs, and happy coding!