diff --git a/app/javascript/vue/protocol/step_elements/checklistItem.vue b/app/javascript/vue/protocol/step_elements/checklistItem.vue
index e8a76cefb..ee165fd17 100644
--- a/app/javascript/vue/protocol/step_elements/checklistItem.vue
+++ b/app/javascript/vue/protocol/step_elements/checklistItem.vue
@@ -42,21 +42,23 @@
         <button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit" tabindex="0">
           <i class="fas fa-pen"></i>
         </button>
-        <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="deleteElement" tabindex="0">
+        <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
           <i class="fas fa-trash"></i>
         </button>
       </div>
     </div>
+    <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement" @cancel="closeDeleteModal"/>
   </div>
 </template>
 
  <script>
   import DeleteMixin from 'vue/protocol/mixins/components/delete.js'
   import InlineEdit from 'vue/shared/inline_edit.vue'
+  import deleteElementModal from 'vue/protocol/modals/delete_element.vue'
 
   export default {
     name: 'ChecklistItem',
-    components: { InlineEdit },
+    components: { InlineEdit, deleteElementModal },
     mixins: [DeleteMixin],
     props: {
       checklistItem: {