Parent and child blocks and DOM manipulation

Hi all,

I am making a slider block. I created a parent block (slider), child block (slides) and everything worked smoothly so far. However, I have problems with moving and deletion of the child blocks inside the parent block.

The script that creates the slider adds some divs. For example, original HTML when script is not running is:

<div class="slider-block">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>

After the slider script is executed, HTML is:

<div class="slider-block">
  <div class="viewport">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
</div>

So, far it works fine. The slider rotates and work smoothly in both editor and site front end.

However, when I try to move slide child blocks or delete them, I got ReactJS error explaining “failed to execute ‘removechild’ on ‘node’: the node to be removed is not a child of this node.”

Any workaround for this? Or it’s not possible to use scripts that manipulates DOM (add new elements, wrap exisiting elements, etc.).

Thanks,
Milos