I have a function to play only the audio of a video mp4 file... part of the function is this (for simplicity I just write the error producing part):

const video = document.createElement('video');

document.body.appendChild(video);

video.id = 'audio-clip'; 

const clip = document.getElementById("audio-clip");

clip.style.visibility = "hidden";

const source = document.createElement('source');

source.src = getBlob(clipSource);

source.type = 'video/mp4';

video.appendChild(source);

video.load();

Then when I want to stop the video I simply remove it from the DOM by this function:

StopMovieAudio = () => {

   console.log('clip', clip);

   console.log('clip.outerHTML', clip.outerHTML);

   clip.outerHTML = "";

} 

The issue is sometimes I get an error that ruins the whole code: here is my console:

As you see the weird part of the error is while I can log the clip.outerHTML and it returns the DOM correctly in the very next line I get the unexpected error:

Failed to set the 'outerHTML' property on 'Element': This element has
no parent node.

What have I missed and how to fix this?

Edit: Guys I noticed even more weird thing... the clip is not attached into body ... even though we can log console.log('clip', clip); and it returns the element, there is no such element in console.log(document.body)!!!!!!!