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?
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();
});
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With