How to force JointJS to fully re-render an element's DOM after removing custom markup content?

[Willia-Yang]

Introduction

I'm dynamically rendering custom compartments in a JointJS element using the markup and attrs properties. Each section (e.g., "parts", "attributes", etc.) is defined in a custom property custom:sections, and I regenerate the element's markup and attrs whenever a section item is removed.

Here's a simplified version of the deletion logic:

export function deleteItem(cellView: dia.CellView, sectionItemElement: Element): void {
  const cell = cellView.model as dia.Element;
  const sectionType = sectionItemElement?.getAttribute('section-type');
  const itemId = sectionItemElement?.getAttribute('section-item-id');

  const sections = (cell.prop('custom:sections') || {}) as Sections;

  if (sectionType && itemId) {
    const filteredItems = sections[sectionType].filter(item => item.elementId !== itemId);
    sections[sectionType] = filteredItems;
  }

  const newAttrs = buildSectionAttrs(sections, cellView);
  const updatedMarkup = buildSectionMarkup(sections);

  cell.prop('custom:sections', sections);
  cell.prop('markup', updatedMarkup);
  cell.attr(newAttrs);

  cell.resize(...); // recalculate height after update
}

I confirmed that buildSectionMarkup() does remove the deleted item from the new markup.
However, despite setting cell.prop('markup', updatedMarkup) and cell.attr(newAttrs), the DOM still shows the deleted element. The old item visually remains, even though the markup no longer contains it. The deleted node should no longer exist in the DOM. But it still appears.This suggests that JointJS is preserving old DOM nodes that were previously matched by selector, even when they're no longer present in the new markup.

I've tried calling:
const view = paper.findViewByModel(cell); view?.update();
But it doesn’t help.
Also tried clearing old markup before setting the new one:
cell.removeAttr('.', { deep: true }); cell.prop('markup', []);
Still, the old nodes remain.
What is the officially recommended way to force a full re-render of an element when the markup changes significantly, especially when DOM nodes are removed?

Thanks in advance!

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

The prop() method is merging value by default. You need to pass the rewrite flag (docs).

cell.prop('markup', updatedMarkup, { rewrite: true });

[Willia-Yang]

Thank you very much for the quick response!Your reply solved my problem.