You know assigning a property to an element is very helpful and efficient during building. basically an element is an object which can be assigned to anything:
let el = document.createElement('div');
el.a = 1;
el.b = [];
class C{}
el.c = new C()
and in testing these actually works well, solid results are returned;
console.log(el.a); // 1
I seek a way to watch in detail and manipulate these action.
for example, I want to get an object of all assigned values:
// something like
el.assigned // {a: 1, b: [], ...}
and a method to delete all (only the plugin javascript assigned, not the default such as style, parentNode, etc)
JsPlumb is a DOM element connectivity library archived by SVG, newest version 5.2.2 on Github, however not a browser release yet. currently stable version on CDN JS
two APIs worth mentioning:
instance.connect: create and return an instance object, meanwhile render SVG result to Dom.jsPlumb.deleteConnection, take a connection object as param and perform deletion.But, the lib seems to use the element for caching in connect, and deleteConnection will not detach all reference completely, and the code will run into issue. which after deletion, we cannot connect anymore. In testing, with the help of @esqew, this is testified which a variable _jsPlumbConnections was assigned to element props, which the lib regards it as something still existing.
// when you tries to connect again, the lib seems verifying through the assigned props and run into bug
TypeError: null is not an object (evaluating 'x.endpoints[0]') jsPlumb.min.js
this.plumb.bind('click', function(conn){
connect.connections.splice(connect.connections.indexOf(conn.cn), 1);
jsPlumb.deleteConnection(conn);
console.log(Object.keys(conn.cn.source));
attr_element({id: null, class: null}, conn.cn.source.backup);
attr_element({id: null, class: null}, conn.cn.target.backup);
connect.render();
});
// ["_jsPlumbConnections"] (1)
It would be good if you were to open an issue on jsPlumb's Github for this. There is no mention of what the specific problem is but if there's a bug we'd like to know.
(edit)
is it this issue?
https://github.com/jsplumb/jsplumb/issues/1077
there is no bug with jsPlumb here. You are not calling delete from the instance that owns the connection.
This probably isn't a good idea (as the comments on the OP stipulate), but you can probably get this done using the spread operator on an element created with document.createElement, which returns only the keys which you've added in this manner:
var element = document.createElement('div');
element.a = 'foo';
element.b = 'bar';
element.c = 4;
console.log({...element});You can then remove them all by iterating using Object.keys():
var element = document.createElement('div');
element.a = 'foo';
element.b = 'bar';
element.c = 4;
console.log({...element});
Object.keys(element).forEach(key => delete element[key]);
console.log({...element});