We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

clear just added element

Hi, when I am adding flowshape or a link into the diagram space by dragging and droping into it, I am opening a pop up to get the name and description from the end user, now I want that if a user click on cancel or close icon of pop up without adding any info or without clicking on save button , it should also remove that recent added element from the diagram space. please help me

5 Replies

GD Gobinath Dhamotharan Syncfusion Team February 17, 2023 03:34 PM UTC

Hi rakhi, 

We can remove the element in diagram using diagram.remove() method. When you are closing the Popup, you need to use diagram remove method to remove the current element. Please refer to the documentation below for your reference. 

RA RakhiS February 27, 2023 04:27 AM UTC

Hi, thanks for the solution, it worked.

Another thing is when I am clicking any element (let say node), and if I press delete from keyboard it itself get vanished from the diagram area and its connected connectors also. 

What I want is: it should not get vanished, it should only get removed when I am pressing no button and cross icon on my confirmation box . Please help me out

BM Balasubramanian Manikandan Syncfusion Team February 28, 2023 11:34 AM UTC

Use CommandManager to prevent node deletion on delete key press. Refer to the below mentioned documentation, code example and sample.



Code Snippet


Prevent deletion in keys


public commandManager = {

    commands: [


        //Method to define whether the command can be executed at the current moment

        canExecute: function () {

          var diagram = (document.getElementById('diagram') as any)


          //Defines that the delete command can be executed, if and only if the selection list is not empty.

          if (

            diagram.selectedItems.nodes.length > 0 ||

            diagram.selectedItems.connectors.length > 0

          ) {

            return false;


          return true;


        //Defines that the delete command has to be executed on the recognition of key press.

        gesture: {

          key: Keys.Delete,






For Delete in Button


  public Delete() {

    if (this.diagram.selectedItems.nodes.length > 0) {


    } else if (this.diagram.selectedItems.connectors.length > 0) {







RA RakhiS replied to Balasubramanian Manikandan March 7, 2023 07:39 AM UTC

Thanks for your reply but please read my requirements again

BM Balasubramanian Manikandan Syncfusion Team March 9, 2023 07:08 AM UTC

Now, you can delete the nodes using user-handles and we prevented the delete operation in delete key pressing. Refer to the below-mentioned sample.



Note: If the provided sample doesn't satisfy your requirement, then please explain what is your requirement in details.

Live Chat Icon For mobile
Up arrow icon