0

I'm explicity not looking for the remove() function.

A jQuery-Object not related to the DOM can be created using this:

let $element = $('<div>').addClass('myInvisibleDomObject').text('Test');

This unrelated object is appended on keypress to my DOM, but should be unappened when releasing the key.

I'm using this for an static object which represents the camera access. So my object is an video element, with stream data, video src, etc. So it's a little bit more complex than the code sample above. I do not want to clone the video object or create a new stream, because this is to slow.

I already tried appendTo(null), but this does not work. Simply hiding is no workaround, because some of the html is replaced via xhr requests on demand. I want a clean solution an no append to some other object like the <body> or something like this.

Example:

 // $element is the element from above
 // .cameraPreview is some div inside my DOM

 $(document).keydown(function(event: JQuery.Event) {
     $element.appendTo('.cameraPreview');
 });

 $(document).keyup(function(event: JQuery.Event) {
     $element.unappendFrom('.cameraPreview'); // this does not exist
 });
7
  • Not sure what you're asking. How do you mean 'unappend'. addClass will not create the element in the DOM?
    – 0stone0
    Oct 24, 2022 at 10:46
  • The element is appended to the DOM when using append(), appendTo() or something like this. Before the element is not visible in the DOM (and not rendered). But in my camera example a video stream from a camera can use an also unappended canvas to create screenshots.
    – SuperNova
    Oct 24, 2022 at 10:53
  • So make an minimal reproducible example showing this. BUt since it's not appended to the DOM, how would you remove it? Doesn't make sense...
    – 0stone0
    Oct 24, 2022 at 10:55
  • I did not see, why I need an example for append()... but however I will add it to my question.
    – SuperNova
    Oct 24, 2022 at 10:56
  • Would moving it off-screen be a solution? Oct 24, 2022 at 11:04

1 Answer 1

1

How about .detach()?

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

let attached = false;
let $container = $('#container');
let $element = $('<div>').addClass('myInvisibleDomObject').text('Test');

$('button').on('click', function() {

    if (attached) {
        console.log('detaching');
        $element.detach();
    } else {
        console.log('attaching');
        $container.append($element);
    }
    
    attached = !attached;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>

<button>Attach/Detach</button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.