Best way to clear values stored by dynamic field that have been removed?

I have a checklist and selected items will be saved into arrayA. The user can check up to 4 items on the checklist. The user also has the option to provide items they don't find in arrayA through input fields. The entered items will be saved into arrayB. Their total sum can be no more than 4.

To help with dynamically displaying the input fields, arrayB is initiated with 4 null values. A forEach is used to render the boxes based on the availability of items remaining.

Problem:

The two arrays will be merged down the line, and I would like to clear the values in arrayB that are not intended to be used.

Example: If there are 2 checked items and 2 typed items, then I end up selecting all 4 checkboxes, the input boxes are no longer present as intended. However, the values were still saved in arrayB.

Is there a convenient way to clear the values as soon as the input box disappears? I don't believe there's an "if deleted" type of property for interface elements.

  Discussion posts and replies are publicly visible