Removing an element by ID (jointJS)

Question

I noticed that JointJS links can be removed by hovering over them and clicking the big red X that appears. But I was wondering if it is possible remove an element once it has been created, without knowing the variable name.

onCreateButtonClick(function(){
  var rect = new joint.shapes.basic.Rect({
    position: { x: 100, y: 30 },
    size: { width: 100, height: 30 }
  });
  graph.addCell([rect]);
});

onRemoveButtonClick(function(){
   //removeRectangle here?
});

My question is: can I remove this rectangle in the second function?

score 8 · Accepted Answer · answered Dec 12 '13 at 14:59

8

Removing elements by ID can simply be done as: graph.getCell(cellID).remove(). In your onRemoveButonClick(), you have to somehow know which element you want to remove. This depends on you application UI but you can, for example, do something like:

var selected;

paper.on('cell:pointerdown', function(cellView) {
    selected = cellView.model;
});

onRemoveButtonClick(function() { 
    if (selected) selected.remove(); 
});

answered Dec 12 '13 at 14:59

dave

4,353
2
29
25

graph.getCell(cellID).remove() does not remove a cell if the cell has children. I get this exception when I try to remove a cell that has children - Uncaught TypeError: Cannot read property 'unembed' of undefined How to delete all the cells of a graph, embedded and un-embedded? – Puneet Pandey Dec 10 '17 at 07:12

score 1 · Answer 2 · answered Oct 20 '16 at 06:24

1

I implemented the removal of an element by single clicking the element , using the cellView arguement directly.

paper.on('cell:pointerclick', function(cellView, evt, x, y) {
    cellView.remove();
});

answered Oct 20 '16 at 06:24

Avinash Dangi

81
5

How to save it to json dynamically? – Keerthi Reddy Yeruva Oct 10 '18 at 06:05
Do you mean to ask how to update the json for removed element ? Are you maintaining the json for paper manually ? – Avinash Dangi Nov 29 '18 at 08:12
Yes, when ever i change or remove element i want to save it to JSON ans send to the server – Keerthi Reddy Yeruva Dec 04 '18 at 05:35

Removing an element by ID (jointJS)

2 Answers2