How to remove and recreate element again with jquery?

Question

I have bootstrap carousel and I have 3 resulotion for my banners (web,tablet and mobil) that's why I show different carousel on web,tablet and mobile. it's okey so far but there is something that I couldn't achieve.

I want to remove my .web-banner class on tablet and I want to recreate again on web resulotion,I want to remove my .tablet-banner on mobil and I want to recreate again on tablet.

this is my project demo but I couldn't share on stackoverflow because it's not working properly on stackoverflow which is why I upload on codepen click to see my demo

EDIT the code snippet

// Web banner
function webSlider() {

  var sources = $('#mycarousel .item img').map(function() {
    return $(this).attr('src');
  });

  $.each(sources, function(index, value) {

    $(".web-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.web-banner').find('.item:first-child').addClass('active');
  })



}


// Tablet banner
function tabletSlider() {
  var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('tablet-src');
  });

  $.each(sources, function(index, value) {

    $(".tablet-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.tablet-banner').find('.item:first-child').addClass('active');
  })

};

// Mobile banner
function mobileSlider() {
  var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('mobile-src');
  });

  $.each(sources, function(index, value) {

    $(".mobile-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.mobile-banner').find('.item:first-child').addClass('active');
  })

};




function sliderControl() {
  var vn = $(window).width();
  var large = 1024;
  var tablet = 767;
  var mobil = 480;

}
$(window).on('resize', sliderControl)
$(document).ready(function() {
  webSlider();
  tabletSlider();
  mobileSlider();
  $(".main-role-banner").remove();
});

#mycarousel {
  height: 400px;
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  height: 400px;
  width: 100%;
}

.divs {
  width: 300px;
  margin: 20px;
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
      <li data-target="#mycarousel" data-slide-to="1"></li>
      <li data-target="#mycarousel" data-slide-to="2"></li>
      <li data-target="#mycarousel" data-slide-to="3"></li>
      <li data-target="#mycarousel" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner main-role-banner" role="listbox">
      <div class="item active">
        <img src="https://unsplash.it/1000/300?image=68" data-tablet-src=" https://unsplash.it/1000/300?image=21" data-mobile-src="https://unsplash.it/500/600?image=1">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=43" data-tablet-src="https://unsplash.it/1000/300?image=1001" data-mobile-src="https://unsplash.it/500/600?image=2">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=67">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=47" data-tablet-src="https://unsplash.it/1000/300?image=1005">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=72" data-mobile-src="https://unsplash.it/500/600?image=3">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=80" data-tablet-src="https://unsplash.it/1000/300?image=84">
      </div>
    </div>

    <div class="carousel-inner web-banner" role="listbox"></div>
    <div class="carousel-inner tablet-banner" role="listbox"></div>
    <div class="carousel-inner mobile-banner" role="listbox"></div>
    <!-- Controls -->
    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

It sounds like you should research using Media queries instead of repeating the HTML structure N times for various resolutions. Also note that you need to place all relevant code *within* the question itself. — Rory McCrossan, Aug 08 '17 at 13:19
it's bootstrap carousel and I have to remove only .carousel-inner class if you check it out you gonna see — ani_css, Aug 08 '17 at 13:21
as @RoryMcCrossan is saying you just need to use media queries to use the same class for different resolutions — Lelio Faieta, Aug 08 '17 at 13:22
guys are you sure you understand something from my question ? media query is not working for my bootstrap carousel I need remove and recreate again my question is not media query. — ani_css, Aug 08 '17 at 13:25

score 2 · Answer 1 · answered Aug 08 '17 at 14:00

I think this is what you are looking for .empty(). It deletes all the content inside the element.

So you need to add these in your function to remove the div

// Web banner
function webSlider() {

  var sources = $('#mycarousel .item img').map(function() {
    return $(this).attr('src');
  });

  $.each(sources, function(index, value) {

    $(".web-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.web-banner').find('.item:first-child').addClass('active');
  })

$('.tablet-banner').empty();
$('.mobile-banner').empty();


}


// Tablet banner
function tabletSlider() {
  var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('tablet-src');
  });

  $.each(sources, function(index, value) {

    $(".tablet-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.tablet-banner').find('.item:first-child').addClass('active');
  })
$('.web-banner').empty();
$('.mobile-banner').empty();
};

// Mobile banner
function mobileSlider() {
  var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('mobile-src');
  });

  $.each(sources, function(index, value) {

    $(".mobile-banner").append("<div class='item'><img src='" + value + "'></div>");
    $('.mobile-banner').find('.item:first-child').addClass('active');
  })
$('.web-banner').empty();
$('.tablet-banner').empty();
};




function sliderControl() {
  var vn = $(window).width();
  var large = 1024;
  var tablet = 767;
  var mobil = 480;

}
$(window).on('resize', sliderControl)
$(document).ready(function() {
  webSlider();
  tabletSlider();
  mobileSlider();
  $(".main-role-banner").remove();
});

#mycarousel {
  height: 400px;
}

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  height: 400px;
  width: 100%;
}

.divs {
  width: 300px;
  margin: 20px;
}

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
      <li data-target="#mycarousel" data-slide-to="1"></li>
      <li data-target="#mycarousel" data-slide-to="2"></li>
      <li data-target="#mycarousel" data-slide-to="3"></li>
      <li data-target="#mycarousel" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner main-role-banner" role="listbox">
      <div class="item active">
        <img src="https://unsplash.it/1000/300?image=68" data-tablet-src=" https://unsplash.it/1000/300?image=21" data-mobile-src="https://unsplash.it/500/600?image=1">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=43" data-tablet-src="https://unsplash.it/1000/300?image=1001" data-mobile-src="https://unsplash.it/500/600?image=2">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=67">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=47" data-tablet-src="https://unsplash.it/1000/300?image=1005">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=72" data-mobile-src="https://unsplash.it/500/600?image=3">
      </div>
      <div class="item">
        <img src="https://unsplash.it/1000/300?image=80" data-tablet-src="https://unsplash.it/1000/300?image=84">
      </div>
    </div>

    <div class="carousel-inner web-banner" role="listbox"></div>
    <div class="carousel-inner tablet-banner" role="listbox"></div>
    <div class="carousel-inner mobile-banner" role="listbox"></div>
    <!-- Controls -->
    <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

hey thank you I tried your code here: https://codepen.io/cowardguy/pen/GvWXbv both mobile and web there is a few bug when I resize page again for web how will I see web banner again ? — ani_css, Aug 08 '17 at 14:18

How to remove and recreate element again with jquery?

1 Answers1