Delete input with value in (confirmation?)

Question

I just got across this thread:

Allowing the user to add input fields

As I am in similar situation I would like to ask from UX perspective, what happens when the user clicks 4 times to add field and then he enters some value and press delete on filled input. Does it just delete or is there any confirmation? Are there any real-life examples in programs to see this in action and how other companies have done this?

Answer 1

There are really only 3 viable methods for handling the deleting of data:

1. Prompt a confirmation, and make it loud!
2. Soft delete the data so it can easily be recoverable if needed (this is much more work to implement though)
3. Have an "undo" function. This is mainly only applicable to document editing types of features, and again is a lot of extra work

Never just delete data from a single click. It's far too easy for it to accidentally happen.

---

With that in mind, let's look at your specific scenario...

You have 2 main use cases, and I will give my suggestion for both.

1. User has added new field, typed a value, and saved it to the database. In this case, you most definitely want to prompt for confirmation to ensure the user doesn't accidentally delete existing data.

2. User has added new field, typed a value, but not yet saved to the database. This is less important for you to need to prompt for confirmation, but still should be considered. I would say you need to make a judgement call based on the type of data your input fields accept. You need to weigh up "annoying the user with needless prompts" vs "annoying the user with loss of entered data".

---

In summary, I will suggest that you always prompt for delete if the input contains a value. If a good enough reason appears down the line to remove the prompt then wait for that reason, don't try to preempt it.

I won't provide examples but I think you will find almost every application that's worth using will have some way to either confirm deletion, or provides an easy recovery/undo feature.

Answer 2

Here's what I would focus on when designing a solution for an form requiring dynamic number of input fields:

1. Assuming that at least one entry is mandatory, when only one input field exists, the user should be permitted to only add more fields and shouldn't be able to delete the field.
2. When there are more than one fields, the user should be able to delete any of the fields as long as at least one field is left after deletion.
3. When the user deletes a field, the field could be immediately removed with an option to rollback the deletion, or deleted upon confirmation, depending on the requirement. My preferred approach would be to delete the field immediately and show a toast message with embedded action that would allow the user to undo the deletion if needed (reactive confirmation).

This is an unobtrusive approach as it allows the user to react if they wish to rollback their last action, but stays out of their way if no further action is needed. Asking for a confirmation before deleting an entry every time (proactive confirmation), on the other hand, would force one additional click per entry for the form field.

As a bonus, you can also add a stepper and text field to the Add Rows section to allow the user to add multiple rows simultaneously.