this.model.remove() doesn't remove element from DOM?

[kk]

why this.model.remove() doesn't remove element from DOM. It took me two days to figure this out and that's why my array calculation is going wrong.

Is there any alternative to remove element from DOM as well?

[Roman Bruckner]

Hi,

cell.remove() should remove cellView from the DOM.

Could you give us some example how you call it?

On 18 September 2015 at 08:38, kk <kirit...@gmail.com> wrote:

why this.model.remove() doesn't remove element from DOM. It took me two days to figure this out and that's why my array calculation is going wrong.

Is there any alternative to remove element from DOM as well?

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[kk]

Hi Roman,

Even after removing the element from DOM, I am able to add child elements to it? How is it possible? My application is working wrong if its like this.

pointerclick: function (evt, x, y) {

var view = paper.findViewByModel(this.model);

var currentParentId = this.model.attributes.parent;

currentParentCell = graph.getCell(currentParentId);

        shapeCount = currentParentCell.attributes.count;

var embeddedCells = currentParentCell.getEmbeddedCells();

if (evt.target.parentNode.getAttribute('class') === 'element-tool-remove' && embeddedCells.length === 1)

{

this.model.remove();

currentParentCell.remove(); // removing the element

}

}

Here I am adding new elements which should not add if the parent element is removed from DOM:

$('.modeler_add_button').on("click", function (event)

{

    if ($.trim($('#columnValue_1').val()).length)

    {

        try

        {

            if (currentParentCell.attributes.count === shapeCount)

            {

                count = shapeCount;

            }

        }

        catch (err)

        {

            console.log(err);

        }

        var columnValue_1 = $('#columnValue_1').val();

        var hasValues = checkInputLength(columnValue_1);

        if (hasValues)

        {

            var columnValue_1 = columnValue_1;

            var textWidth = $('#columnValue_1').textWidth();

            //set Toggle to visible before adding new column

            setToggleVisible(currentParentCell.id, currentParentCell.getEmbeddedCells());

            //Function call to Add New Column

            var newRect = addNewColumn(columnValue_1);

}

//Function to add new rect is:

function addNewColumn(inputVal)

{

    var parentBox = getPosition(currentParentCell);

    var maxWidth = getMaxWidth();

    var latestY_Value = getLatestY();

    var newRect = new joint.shapes.devs.TooledModel({

        isInteractive: false,

        position: {x: parentBox.x + 1, y: latestY_Value + 25},

        size: {width: maxWidth, height: 25},

        attrs: {

            text: {text: inputVal, fill: 'black', 'font-weight': 'normal', 'font-size': 12},

            rect: {

                fill: '#fff', opacity: .80, 'stroke-width': 0.3, stroke: '#000'

            }

        }

    });

    currentParentCell.embed(newRect);

    graph.addCells([newRect]);

    currentParentCell.embed(newRect);

    graph.addCells([newRect]);

    return newRect;

}

How do I fix this?

[David Durman]

That is correct. Removing a model removes it from the graph, and the associated view reacts by removing the SVG element from the DOM. But you still have a reference to the model with all its methods. It's the same thing as if you would remove an HTML DOM element from the live DOM, you still have reference to it and you can add children to it and maybe later on append it back to the live DOM.

If you don't want to embed other elements into your removed parent element, you should check that in your application code. The application should know when an element was removed.

---

David Durman

client IO

http://client.io

+420 774 346 225

[kk]

Hi David,

Thanks for your reply. How do I check if the parent is removed? If I check for parent ID, its returning the ID. What ever I try it doesn't return null or throw any error for me figure out if if the parent is removed or not?

Is there any method in API or any option to deep clean a parent element from DOM with out any references? 

Thank you

[David Durman]

You can check if the element is in the graph. graph.getCell(myElement.id) returns myElement if it is in the graph and undefined if it is not.

Just to clarify on the terminology here. JointJS is not a DOM manipulation library (like jQuery). It is an MVC framework (please see my explanation in the thread: https://groups.google.com/forum/#!topic/jointjs/o98C9H3ETVE). So when you call remove() on an element model, we're not saying you "remove it from DOM". The actual removal of the SVG representation of that model in the live DOM is done by the associated joint.dia.ElementView that gets notified about this removal (if the element is in the graph).

There is no API to deep clean references on objects in JointJS. This is a matter of JavaScript. For example, let's say you have an object:

var o = { nested: { foo: 1 } };

Now you create a reference to the 'nested' subobject:

var n = o.nested;

Now even if you "delete" the 'nested' property of the 'o' object, you still have a reference to that object via the variable 'n':

delete o.nested;

console.log(n)  // still prints { foo: 1 }

Basically (in a simplistic form), you can 'delete' properties from objects using the 'delete' operator. Variables die when the function in which they are defined finishes execution.

ᐧ

---

David Durman

client IO

http://client.io

+420 774 346 225

--