How do I remove an element in dragula after cloning?

Question

After dragging elements from a parent container id=left-copy-1tomany, I wish to remove some of the cloned elements from the clone container id=right-copy-1tomany. I want to remove them by using the removeOnSpill: true function which should let me drag elements out of a container to remove it. Is there a way to make this work with the cloning code?

HTML:

<div class='parent'>
    <div class='wrapper'>
        <div id='right-copy-1tomany' class='container'></div>
            <div id='left-copy-1tomany' class='container'>
                <div>TEST BOX 1</div>
                <div>TEST BOX 2</div>
                <div>TEST BOX 3</div>
                <div>TEST BOX 4</div>
                <div>TEST BOX 5</div>
            </div>
        </div>
    </div>
</div>

<h4>Dragule Code:</h4>

JS:

dragula([document.getElementById(left), document.getElementById(right)],{
    accepts: function (el, target) {
    return target !== document.getElementById(right);
  },
    copy: function (el, source) {
    return source === document.getElementById(right);
  },
    removeOnSpill: true,
  }
});

Answer 1

Try with el.remove() in the dropModel() event:

 this.dragulaService.dropModel("<dragula-id>")
  .subscribe(({ name, el, target, source, sibling, sourceModel, targetModel, item }) => {
    if (<condition-to-remove>) {
       el.remove()
    }
  });