jQuery append not inserting detached elements -

i can't seem append working elements detaching detach()

basically want remove images dom based on screen size (larger 900px) , add them (smaller 900px). using enquire.js handle breakpoints unable implement insertion of removed elements.

here's html:

<div class="mobile-slides">   <a><img src="image.jpg" /></a>   <a><img src="image2.jpg" /></a>   <a><img src="image2.jpg" /></a> </div>       

here's js i'm using:

enquire.register("screen , (min-width: 900px)", {     match : function() {         var slides = $('.mobile-slides a').detach();     },     unmatch : function() {         $('.mobile-slides').append(slides);     } }); 

detach seems working when second condition met nothing happening. doing wrong?

edit stupid mistake on behalf declaring variable "slides" inside enquire match function therefore wasn't available unmatch function.

this works:

var slides = $('.mobile-slides a'); enquire.register("screen , (min-width: 900px)", {     match : function() {         $('.mobile-slides a').detach();     },     unmatch : function() {         $('.mobile-slides').append(slides);     } }); 

i use remove() seems instead of detach()

slides.appendto( '.mobile-slides' ); 

sample code button click ,

var slides; $( "button" ).click(function() {   if ( slides ) {     slides.appendto( ".mobile-slides" );     slides = null;   } else {     slides = $('.mobile-slides a').detach();   } });