diff --git a/frontend/src/components/widget/deWidget/DeTabs.vue b/frontend/src/components/widget/deWidget/DeTabs.vue
index fa9c821dfc..23c51cb41c 100644
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/frontend/src/components/widget/deWidget/DeTabs.vue
@@ -640,7 +640,7 @@ export default {
       while (len--) {
         if (this.element.options.tabList[len].name === param.name) {
           this.element.options.tabList.splice(len, 1)
-
+          this.$store.commit('deleteComponentsWithCanvasId', this.element.id + '-' + param.name)
           const activeIndex = (len - 1 + this.element.options.tabList.length) % this.element.options.tabList.length
           this.activeTabName = this.element.options.tabList[activeIndex].name
         }
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index fda7afc92e..a6f76f0cda 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -503,6 +503,9 @@ const data = {
         const element = state.componentData[index]
         if (element.id && element.id === id) {
           state.componentData.splice(index, 1)
+          if (element.type === 'de-tabs') {
+            this.commit('deleteComponentsWithCanvasId', element.id)
+          }
           break
         }
       }
@@ -811,6 +814,16 @@ const data = {
       state.mousePointShadowMap.mouseY = mousePoint.mouseY
       state.mousePointShadowMap.width = mousePoint.width
       state.mousePointShadowMap.height = mousePoint.height
+    },
+    deleteComponentsWithCanvasId(state, canvasId) {
+      if (canvasId && canvasId.length > 10) {
+        for (let index = 0; index < state.componentData.length; index++) {
+          const element = state.componentData[index]
+          if (element.canvasId && element.canvasId.includes(canvasId)) {
+            state.componentData.splice(index, 1)
+          }
+        }
+      }
     }
   },
   modules: {