Right way to make a remove node button on every node

[thp44]

Hi, I really enjoy d3-org-chart :) Thanks for making an awesome tool!

Recently, I tried to add a hide button that displays a remove button on every node. I was able to achieve this, but I'm having difficulty making the button work repeatedly on multiple components without having to click the remove button again.

I'm wondering what the best approach would be to create such a button? It seems like I need to add an event listener every time the chart is updated, but I'm struggling with "calling a function from HTML string javascript."

Could anyone provide some guidance on the best practices and methodologies for implementing this feature?

[bumbeishvili]

Hi, you can add remove button in nodeContent, then you can attach event listener in nodeUpdate

Something like this

chart.nodeUpdate(function(d){
  const currentNode = d3.select(this)
  const removeButton = currentNode.select('#removeButtonIdSelector');
  removeButton.on('click.remove-node',()=>chart.removeNode(d.id))
})

[thp44]

Great thanks, it works! 👍

The removed node somehow still appear when expanding the chart if I show/hide the remove button. I think it a state issue outside org-chart though..

[bumbeishvili]

Can you share a recording of the screen? And if you are using any libraries

[bumbeishvili]

Additional thoughts - yes, it's most probably a state issue, and the same/previous data (with removed node) is getting passed probably