diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index 68af5f2b59..bf76d939fb 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -1,4 +1,10 @@
-import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
+import {
+ mdiDelete,
+ mdiDrag,
+ mdiNotificationClearAll,
+ mdiPlus,
+ mdiSort,
+} from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
CSSResultGroup,
@@ -293,6 +299,23 @@ export class HuiTodoListCard
.itemId=${item.uid}
@change=${this._saveEdit}
>
+ ${this.todoListSupportsFeature(
+ TodoListEntityFeature.DELETE_TODO_ITEM
+ ) &&
+ !this.todoListSupportsFeature(
+ TodoListEntityFeature.UPDATE_TODO_ITEM
+ )
+ ? html`
+ `
+ : nothing}
`
)}
@@ -341,7 +364,23 @@ export class HuiTodoListCard
>
`
- : ""}
+ : this.todoListSupportsFeature(
+ TodoListEntityFeature.DELETE_TODO_ITEM
+ ) &&
+ !this.todoListSupportsFeature(
+ TodoListEntityFeature.UPDATE_TODO_ITEM
+ )
+ ? html`
+ `
+ : nothing}
`
)}
@@ -431,6 +470,16 @@ export class HuiTodoListCard
}
}
+ private _deleteItem(ev): void {
+ const item = this._getItem(ev.target.itemId);
+ if (!item) {
+ return;
+ }
+ deleteItem(this.hass!, this._entityId!, item.uid).finally(() =>
+ this._fetchData()
+ );
+ }
+
private _addKeyPress(ev): void {
if (ev.key === "Enter") {
this._addItem(null);
@@ -541,6 +590,12 @@ export class HuiTodoListCard
direction: var(--direction);
}
+ .deleteItemButton {
+ margin-right: -12px;
+ margin-inline-end: -12px;
+ direction: var(--direction);
+ }
+
.reorderButton {
margin-right: -12px;
margin-inline-end: -12px;
diff --git a/src/translations/en.json b/src/translations/en.json
index e3047241c3..0b6a543533 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -4526,7 +4526,8 @@
"clear_items": "Clear checked items",
"add_item": "Add item",
"reorder_items": "Reorder items",
- "drag_and_drop": "Drag and drop"
+ "drag_and_drop": "Drag and drop",
+ "delete_item": "Delete item"
},
"picture-elements": {
"hold": "Hold:",