How to remove the components correctly?

I want to remove the components programmatically, the following is my code snippet.

const Command = editor.Commands.get('select-comp')
editor.Commands.extend('select-comp', {
  // Overwrite this private method to make the toolbar conditionally display.
  updateToolbar(mod) {
    const em = this.config.em
    const model = mod == em ? em.getSelected() : mod
    if (model) {
      const toolbar = model.get('__toolbar') || model.get('toolbar')
      const filtered = toolbar.filter(item => item.isAvailable === undefined || item.isAvailable.call(this, em))
      model.has('__toolbar') || model.set('__toolbar', toolbar)
      model.set('toolbar', filtered)
    }
    Command.updateToolbar.call(this, mod)
  }
})

// ====== ↓ Remove Logic ↓ ======
// Command: Combine the cells
editor.Commands.add('table:table-cells-combine', editor => {
  const em = editor.getModel()
  const components = editor.getSelectedAll()
  // Choose the firstly selected as the primary cell.
  const component = components[0]
  // Keep this component, but remove other selected.
  components.slice(1, components.length).forEach(item => item.remove())
  // Update the attributes
  const [rowspan, colspan] = component.get('__span') || []
  component.setAttributes({rowspan, colspan})
  em.setSelected(component)
})

// Extend the cell toolbar items.
editor.DomComponents.addType('cell', {
  extendFn: ['initToolbar'],
  model: {
    initToolbar() {
      const model = this
      var tb = [...model.get('toolbar') || []]

      // Tool: combine the cells.
      tb.push({
        attributes: { class: 'fa fa-square-o' },
        command: ed => ed.runCommand('table:table-cells-combine'),
        isAvailable (ed) {
          const components = ed.getSelectedAll()
          components.forEach(component => component.unset('__span'))
          if (components.length > 1) {
            const [ tl, br ] = components
              .reduce((r, comp) => {
                const [ tl, br ] = r
                const parent = comp.parent()
                if (parent) {
                  // ====== ↓ Issue ↓ ======
                  // The parent may be undefined, ex: the component was removed before the undo command(Ctrl + Z).
                  const rowIndex = parent.index()
                  const columnIndex = comp.index()
                  tl[0] < rowIndex || (tl[0] = rowIndex)
                  tl[1] < columnIndex || (tl[1] = columnIndex)
                  br[0] > rowIndex || (br[0] = rowIndex)
                  br[1] > columnIndex || (br[1] = columnIndex)
                }
                return r
              }, [[], []])
            const rowspan = br[0] - tl[0] + 1
            const colspan = br[1] - tl[1] + 1
            const selected = components[0]
            selected.set('__span', [rowspan, colspan])
            return components.length === colspan * rowspan
          }
          return false
        }
      })
      model.set('toolbar', tb)
    }
  }
})

After the components have been removed, then undo the delete actions (Ctrl + Z), do the multiple selections with the shift key will get the error Uncaught TypeError: Cannot read property 'indexOf' of undefined.

My question is: How to remove the components correctly?