jquery - Javascript on checked box clone this div, on unchecked remove this div

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, acpanied by localStorage. Can someone help me to fix this?

function onClickAvGamesCheckBox() {
  var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
  var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(".avclone :checkbox").change(function() {
  var name = $(this).closest("div").attr("name");
  if (this.checked)
    $(".columns[name=" + name + "]").clone().appendTo("#favorite");
  else
    $("#favorite .columns[name=" + name + "]").remove();
});

* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url(".png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url(".png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<script src=".12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="/" data-path><img src=".jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>

  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="/" data-path><img src=".jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>

</div>
<div id="favorite"></div>

function onClickAvGamesCheckBox() {
  var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
  var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(".avclone :checkbox").change(function() {
  var name = $(this).closest("div").attr("name");
  if (this.checked)
    $(".columns[name=" + name + "]").clone().appendTo("#favorite");
  else
    $("#favorite .columns[name=" + name + "]").remove();
});

* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>

  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>

</div>
<div id="favorite"></div>

Share Improve this question edited Dec 19, 2018 at 11:22 Mark Schultheiss 34.2k12 gold badges72 silver badges113 bronze badges asked Dec 13, 2018 at 4:04 Leo 3152 gold badges7 silver badges28 bronze badges

This code appears to work properly: jsfiddle/Twisty/mch7Lxr3/3 I do not see where #favorite is located in HTML. – Twisty Commented Dec 19, 2018 at 7:02
thank you very mouch for your help, so if you add the <div id="favorite"></div> bottom you see when you click uncheck on clones div is not working correct. – Leo Commented Dec 19, 2018 at 7:47
that what I want to do is when I uncheck from copy div, that need to remove the corect div (not others) and uncheck the original div – Leo Commented Dec 19, 2018 at 7:49
just curious why still using jQuery ? why not React or simple ES6 with web ponents – STEEL Commented Dec 20, 2018 at 13:22
@STEEL if you have any code or any idea, please show me! Thank you. – Leo Commented Dec 20, 2018 at 13:29

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6 +50

You have a click handler, so we wire that up to do the storage (will not work here due to sandbox), we also can use data and filter by that, adding an index to each columns container to use to filter the cloned items so we can target them and remove no matter which one is added first.

Here is a fiddle with custom event and slightly more plex storage example: https://jsfiddle/MarkSchultheiss/5Luyn18j/47/ done as a fiddle to avoid the sandbox on SO.

Original:

//borrow some code from https://stackoverflow./a/15651670/125981
(function($) {
  $.fn.filterByData = function(prop, val) {
    return this.filter(
      function() {
        return $(this).data(prop) == val;
      }
    );
  }
})(window.jQuery);

function onClickAvGamesCheckBox(event) {
  var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  // localStorage.setItem("checked", JSON.stringify(arr));
}

$(function() {
  //add some data
  $('.AvGamesCheckBox').each(function(index, element) {
    $(this).closest('.column').data("checkindex", index);
  });
  // replace [] with the mented out for real stuff
  var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    $('.AvGamesCheckBox').eq(i).prop('checked', checked);
  });
  $(".AvGamesCheckBox").trigger("change");
});

//* Clone script
$(".avclone").on('change', '.AvGamesCheckBox', function() {
  var checkContainer = $(this).closest('.column');
  var checkIndex = checkContainer.data("checkindex");
  var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
  if (this.checked && !matcher.length)
    checkContainer.clone(true).appendTo("#favorite");
  else
    matcher.remove();
}).on('click', '.AvGamesCheckBox', onClickAvGamesCheckBox);

* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>
</div>
<div id="favorite" ></div>

Addition of the click on the clone: EDIT: added custom event and ment on how to modify for real use

//borrow some code from https://stackoverflow./a/15651670/125981
(function($) {
  $.fn.filterByData = function(prop, val) {
    return this.filter(
      function() {
        return $(this).data(prop) == val;
      }
    );
  }
})(window.jQuery);

function onClickAvGamesCheckBox(event) {
  var arr = $(".avclone").find('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  //EDIT: un-ment for real use
  // localStorage.setItem("checked", JSON.stringify(arr));
}

$(function() {
  //add some data
  var checks = $(".avclone").find('.AvGamesCheckBox');
  checks.each(function(index, element) {
    $(this).closest('.column').data("checkindex", index);
  });
  //EDIT replace []; with mented out code for real use
  var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {
    checks.eq(i).prop('checked', checked);
  });
  //checks.trigger("change");
});

//* Clone script
$(".avclone, #favorite").on('change', '.AvGamesCheckBox', function() {
  var checkContainer = $(this).closest('.column');
  var checkIndex = checkContainer.data("checkindex");
  var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
  if (this.checked && !matcher.length) {
    checkContainer.clone(true).appendTo("#favorite");
  } else {
    $(".avclone").find('.AvGamesCheckBox')
         .eq(checkIndex).trigger('clickcustom');
    matcher.remove();
  }
});
$(".avclone").on('click clickcustom', '.AvGamesCheckBox', onClickAvGamesCheckBox);

* {
  box-sizing: border-box;
  padding: 5px;
}

.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}

.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomleft: 8px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 8px;
  z-index: 5;
}

.AvGamesContainer input:checked~.AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AvGamesContainer:hover input~.AvGamesCheckmark {
  background-color: #fff;
}

.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.AvGamesContainer input:checked~.AvGamesCheckmark:after {
  display: none;
}

.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}

img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}

img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
  -webkit-filter: saturate(150%);
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}

.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
    </div>
  </div>
  <div class="column">
    <div class="columns">
      <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
      <a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>
</div>
<div id="favorite"></div>

This should work for you. Note: avoid using camelcase classes or ids. Also relying on elements indexes it's not a good idea I would use some sort of identifier to track elements relations.

JS:

function onClickAvGamesCheckBox() {
    var arr = $('.AvGamesCheckBox').map(function() {
    return this.checked;
  }).get();
  localStorage.setItem("checked", JSON.stringify(arr));
}

$(document).ready(function() {
    var arr = JSON.parse(localStorage.getItem('checked')) || [];
  arr.forEach(function(checked, i) {

  $('.AvGamesCheckBox').eq(i).prop('checked', checked).trigger("change");
  });
  $(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});

//* Clone script
$(document).on("change", ".avclone [type='checkbox']", function(e){ 
var column = $(e.target).closest(".column"),
    eq = column.index();
if ($(e.target).prop("checked"))
    column.clone().attr("data-eq", eq).appendTo("#favorite");
else
    $("#favorite .column[data-eq='"+eq+"']").remove();
});

CSS:

* {
  box-sizing: border-box;
  padding: 5px;
}
.AvGamesContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.AvGamesContainer input {
  position: absolute;
  opacity: 0;
  display: none;
  visibility: hidden;
  cursor: pointer;
  height: 0;
  width: 0;
}
.AvGamesCheckmark {
  position: absolute;
  top: 26px;
  right: 0;
  height: 25px;
  width: 25px;
  padding: 3px !important;
  background-color: #fff;
  background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
  z-index: 5;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark {
  background-color: #fff;
  color: yellow !important;
  background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.AvGamesContainer:hover input ~ .AvGamesCheckmark {
  background-color: #fff;
}
.AvGamesCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark:after {
  display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
  display: none;
}
img {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  transition: all 0.5s ease-in-out 0s;
  z-index: 4;
}
img:hover {
  -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
  -webkit-filter: saturate(150%);
}
.column {
  float: left;
  width: 50%;
  padding: 5px;
  height: auto;
}
.columns {
  position: relative;
  border-radius: 10px;
  text-align: center;
  width: 99%;
  margin: 0 auto;
  padding: 5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

#favorite .column .AvGamesCheckmark {
  display: none!important
}

HTML:

<div class="avclone"> 
<div class="column">
  <div class="columns">
  <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label> 
<a href="https://games.softgames./games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357" title="Aqua Blitz 2"></a>
</div>
</div>

<div class="column">
  <div class="columns">
  <label class="AvGamesContainer">
  <input type="checkbox" name="AvGamesContainer1" class="AvGamesCheckBox">
  <span class="AvGamesCheckmark"></span>
  </label>
<a href="https://games.softgames./games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
  </div>
</div> 

</div>

<div id="favorite"></div>

@Leo since you asked how to do this in React. DEMO: https://react-krwy1w.stackblitz.io/

CODE: https://stackblitz./edit/react-krwy1w?file=index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

const GAME_IMAGES = [
  {
    title: "some title 01",
    href: "https://games.softgames./games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  },
  {
    title: "some title 02",
    href: "https://games.softgames./games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357"
  },
  {
    title: "some title 03",
    href: "https://games.softgames./games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  },
];


const GameCard = ({title, href, img, onChange}) => {
  return (
    <div className="column">
      <div className="columns">
        <label className="AvGamesContainer">
          <input type="checkbox" name="AvGamesContainer" className="AvGamesCheckBox" onChange={(e) => onChange(e.target.checked, {title, href, img})}/>
          <span className ="AvGamesCheckmark"></span>
        </label>
          <a href={href}>
            <img src={img} title={title}/>
          </a>
      </div>
    </div>
  );
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      display: null
    }
  }

  handleChange(isChecked, obj) {
    this.setState({
        display: isChecked ? obj : null
      });
  }

  render() {
    return (
      <div>
        {
          this.state.display !== null ?
            <div id="favorite">
          {<GameCard {...this.state.display} />}
        </div> : null
        }

        <p>
          Start editing to see some magic happen :)
        </p>
        {
          GAME_IMAGES.map(prop => <GameCard {...prop} onChange={this.handleChange.bind(this)} />)
        }
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744866898a4598028.html

jquery - Javascript on checked box clone this div, on unchecked remove this div - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - Javascript on checked box clone this div, on unchecked remove this div - Stack Overflow

3 Answers 3

相关推荐