diff --git a/module/applications/ui/effectsDisplay.mjs b/module/applications/ui/effectsDisplay.mjs
index 7f90e30b..0875e783 100644
--- a/module/applications/ui/effectsDisplay.mjs
+++ b/module/applications/ui/effectsDisplay.mjs
@@ -87,7 +87,7 @@ export default class DhEffectsDisplay extends HandlebarsApplicationMixin(Applica
     async removeEffect(event) {
         const element = event.target.closest('.effect-container');
         const effects = DhEffectsDisplay.getTokenEffects();
-        const effect = effects.find(x => x.id === element.id);
+        const effect = effects.find(x => x.id === element.dataset.effectId);
         await effect.delete();
         this.render();
     }
diff --git a/templates/ui/effects-display.hbs b/templates/ui/effects-display.hbs
index da37d8eb..95c6023c 100644
--- a/templates/ui/effects-display.hbs
+++ b/templates/ui/effects-display.hbs
@@ -1,8 +1,9 @@
 <div>
     <div class="effects-display-container">
         {{#each effects as | effect |}}
-            <span class="effect-container {{#if effect.condition}}disabled{{/if}}" data-tooltip="#effect-display#" id="{{effect.id}}"
-                data-applied-by="{{effect.appliedBy}}" {{#if effect.condition}}data-condition="{{effect.condition}}"{{else}}data-uuid="{{effect.uuid}}"{{/if}}
+            <span class="effect-container {{#if effect.condition}}disabled{{/if}}" data-tooltip="#effect-display#" data-effect-id="{{effect.id}}"
+                {{#if effect.appliedBy}}data-applied-by="{{effect.appliedBy}}"{{/if}}
+                {{#if effect.condition}}data-condition="{{effect.condition}}"{{else}}data-uuid="{{effect.uuid}}"{{/if}}
             >
                 <a {{#if effect.condition}}disabled{{/if}}>
                     <img src="{{effect.img}}" />