javascript – How to delete child block for associated parent block

Question

I have a parent block which is for the tabs themselves and a child block which is an innerBlock. Here is the on click event handler for adding a new tab:

const addNewTab = () => {
  const tab = createBlock("blocks/tab");
  const position = tabs.length;
  dispatch("core/block-editor").insertBlock(tab, position, clientId);
  setAttributes({
    tabs: [
      ...tabs,
      {
        uid: tab.clientId,
        title: `Tab ${tabs.length + 1}`,
      },
    ],
  });
  setActiveTab(tab.clientId);
};

When I click to delete, it removes the tab/parent block but I can’t remove the child block. I have commented some code to show what I tried but it is removing all child blocks ie: tab content.

const deleteTab = (uid) => {
  const newTabsData = [...tabs];
  newTabsData.splice(uid, 1);

    
// This removes ALL child blocks. I jsut wanted to remove the associated one.
  const currentBlock =
    select("core/editor").getBlocksByClientId(clientId)[0];
  const childBlocks = currentBlock.innerBlocks;
  const clientIds = childBlocks.map((block) => block.clientId);
  dispatch("core/editor").removeBlocks(clientIds);
    
    

  setAttributes({
    tabs: newTabsData,
  });
};

0
user8463989 1 month 2022-10-16T07:09:53-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse