# Delete button with confirmation

**URL:** <https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628>\
**Category:** Learn\
**Created:** [May 12, 2026, 10:01am UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628 "2026-05-12T10:01:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![setop](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/setop/32/4331_2.png) [@setop](https://discourse.elm-lang.org/u/setop)\
**Post date:** [May 12, 2026, 10:01am UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/1 "2026-05-12T10:01:13Z")

</div>

For an application, I want to add a confirmation dialog to a delete button in order to prevent my users from “oups ! I lost data”.

I want something very basic using native web browser `window.confirm`.

I came across [this post](https://discourse.elm-lang.org/t/xxx/844) but I’d like to avoid ports and have a web component instead.

If there is no know implementation, I’ll probably do it myself but I want to avoid to duplicate work and rather contribute to existing one.

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [May 12, 2026, 2:39pm UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/2 "2026-05-12T14:39:16Z")

</div>

Possibly a better approach than a web component [https://ellie-app.com/yKLggjjmLm8a1](https://ellie-app.com/yKLggjjmLm8a1)

---

<div class="post-metadata">

**Author:** ![setop](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/setop/32/4331_2.png) [@setop](https://discourse.elm-lang.org/u/setop)\
**Post date:** [May 12, 2026, 3:34pm UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/3 "2026-05-12T15:34:08Z")

</div>

Beautiful ! I love it.

To sum up:

In Elm view:

```elm
button
    [onClick WhateverMsg, attribute "data-confirm" "Confirm message"]
    [text "delete"]

```

In HTML app page:

```javascript
document.addEventListener('click', function(event) {
if (event.target.getAttribute('data-confirm') !== null) {
  const message = event.target.getAttribute('data-confirm') || 'Are you sure?';
  if (!window.confirm(message)) {
    event.stopImmediatePropagation();
    event.preventDefault();
  }
}

```

---

<div class="post-metadata">

**Author:** ![edkelly303](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/edkelly303/32/1510_2.png) [@edkelly303](https://discourse.elm-lang.org/u/edkelly303)\
**Post date:** [May 13, 2026, 6:36am UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/4 "2026-05-13T06:36:41Z")

</div>

Oh, what? I had no idea you could do that. Super useful, thanks Wolfadex!

---

<div class="post-metadata">

**Author:** ![jerith](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jerith/32/114_2.png) [@jerith](https://discourse.elm-lang.org/u/jerith)\
**Post date:** [May 17, 2026, 5:33pm UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/5 "2026-05-17T17:33:12Z")

</div>

Where is that `data-confirm` attribute on `<button>` documented? I couldn’t find anything about it on MDN.

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [May 17, 2026, 5:40pm UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/6 "2026-05-17T17:40:26Z")

</div>

[Data attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes) are custom attributes with no defined meaning. The JavaScript code of that Ellie powers it.

---

<div class="post-metadata">

**Author:** ![jerith](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/jerith/32/114_2.png) [@jerith](https://discourse.elm-lang.org/u/jerith)\
**Post date:** [May 17, 2026, 6:28pm UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/7 "2026-05-17T18:28:33Z")

</div>

Shoot, I didn’t even look at the JS in the Ellie – sorry, thanks!

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 27, 2026, 6:28pm UTC](https://discourse.elm-lang.org/t/delete-button-with-confirmation/10628/8 "2026-05-27T18:28:41Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.