fix: remove style node when attached to parent node

confususs · confususs · commit 942a9f6bb8d8 · 2023-12-04T15:50:50.000+01:00
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1489,7 +1489,8 @@ export class GridStack {
   protected _removeStylesheet(): GridStack {
 
     if (this._styles) {
-      Utils.removeStylesheet(this._styleSheetClass);
+      const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+      Utils.removeStylesheet(this._styleSheetClass, styleLocation);
       delete this._styles;
     }
     return this;
@@ -1517,7 +1518,7 @@ export class GridStack {
     // create one as needed
     if (!this._styles) {
       // insert style to parent (instead of 'head' by default) to support WebComponent
-      let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
+      const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
       this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {
         nonce: this.opts.nonce,
       });
@@ -2216,7 +2217,7 @@ export class GridStack {
         if (this._gsEventHandler['dropped']) {
           this._gsEventHandler['dropped']({...event, type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);
         }
-        
+
         return false; // prevent parent from receiving msg (which may be grid as well)
       });
     return this;
diff --git a/src/utils.ts b/src/utils.ts
@@ -182,8 +182,9 @@ export class Utils {
   }
 
   /** removed the given stylesheet id */
-  static removeStylesheet(id: string): void {
-    let el = document.querySelector('STYLE[gs-style-id=' + id + ']');
+  static removeStylesheet(id: string, parent?: HTMLElement): void {
+    const target = parent || document;
+    let el = target.querySelector('STYLE[gs-style-id=' + id + ']');
     if (el && el.parentNode) el.remove();
   }
 

Original file line number	Diff line number	Diff line change
`@@ -182,8 +182,9 @@ export class Utils {`
`182`	`182`	`}`
`183`	`183`
`184`	`184`	`/** removed the given stylesheet id */`
`185`		`- static removeStylesheet(id: string): void {`
`186`		`- let el = document.querySelector('STYLE[gs-style-id=' + id + ']');`
	`185`	`+ static removeStylesheet(id: string, parent?: HTMLElement): void {`
	`186`	`+ const target = parent \|\| document;`
	`187`	`+ let el = target.querySelector('STYLE[gs-style-id=' + id + ']');`
`187`	`188`	`if (el && el.parentNode) el.remove();`
`188`	`189`	`}`
`189`	`190`