选中复选框上的 Javascript 克隆此 div，未选中删除此 div

Posted

技术标签:

【中文标题】选中复选框上的 Javascript 克隆此 div，未选中删除此 div【英文标题】：Javascript on checked box clone this div, on unchecked remove this div 【发布时间】：2019-05-14 06:10:19 【问题描述】：

选中复选框时，克隆正确的 div 并在示例中显示：<div id="favorite"></div> 当未选中复选框时删除克隆，并附上 localStorage。有人可以帮我解决这个问题吗？

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.com/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.com/games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/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.com/games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>

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

选中复选框时，克隆正确的 div 并在示例中显示：&lt;div id="favorite"&gt;&lt;/div&gt; 当未选中复选框时删除克隆，并附上 localStorage。有人可以帮我解决这个问题吗？

【问题讨论】：

这段代码似乎可以正常工作：jsfiddle.net/Twisty/mch7Lxr3/3 我看不到#favorite 在 html 中的位置。 非常感谢您的帮助，所以如果您添加&lt;div id="favorite"&gt;&lt;/div&gt; 底部，当您单击取消选中克隆时会看到 div 无法正常工作。 我想要做的是当我从复制div中取消选中时，需要删除正确的div（而不是其他div）并取消选中原始div 只是好奇为什么还在使用 jQuery ？为什么不用 React 或简单的 ES6 与 Web 组件 @STEEL 如果您有任何代码或任何想法，请告诉我！谢谢。 【参考方案1】：

这应该适合你。注意：避免使用驼峰类或 id。同样依赖元素索引不是一个好主意，我会使用某种标识符来跟踪元素关系。

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.com/games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/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.com/games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
  </div>
</div> 

</div>

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

【讨论】：

感谢您的帮助，如果我更改 class="AvGamesCheckBox" 并将其添加到不同的 id 示例：id="AvGame1" id="AvGame2" id="AvGame3" 等，就像这样我认为可以，当检查复选框时复制corect div，当ucheck删除副本div时，如果用户从copy div删除副本div，并取消选中原始div？我想做的是在最喜欢的 div 上显示最喜欢的游戏，这并不重要，脚本可以不同。 这也缺少添加到本地存储的收藏夹，@Leo 说的所有其他内容。但这是很好的第一步。 感谢@IslamElshobokshy 如果您能提出任何代码建议应该很棒，再次感谢。【参考方案2】：

您有一个点击处理程序，因此我们将它连接起来进行存储（由于沙箱，在此处无法使用），我们还可以使用数据并通过它进行过滤，为每个 columns 容器添加一个索引以用于过滤克隆的项目，这样我们就可以定位它们并删除无论哪个先添加。

这是一个自定义事件和稍微复杂的存储示例： https://jsfiddle.net/MarkSchultheiss/5Luyn18j/47/ 做了一个小提琴以避免 SO 上的沙箱。

原文：

//borrow some code from https://***.com/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 commented 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.com/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.com/games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/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.com/games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>
</div>
<div id="favorite" ></div>

增加对克隆的点击： 编辑：添加自定义事件并评论如何修改以供实际使用

//borrow some code from https://***.com/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-comment 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 commented 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.com/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.com/games/aquablitz-2/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/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.com/games/daily-sudoku/gamesites/7665/" data-path><img src="https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357" title="Daily Sudoku"></a>
    </div>
  </div>
</div>
<div id="favorite"></div>

【讨论】：

感谢您的帮助，如果我更改 class="AvGamesCheckBox" 并将其添加到不同的 id 示例：id="AvGame1" id="AvGame2" id="AvGame3" 等，所以像这样我认为是可能的，当复选框是选中复制corect div，当ucheck删除复制div，如果用户ucheck从复制div删除复制div，并取消选中原始div？我想要做的是在最喜欢的 div 上展示最喜欢的游戏，这并不重要，脚本可以不同。我希望我真的能得到帮助，我需要几周的时间才能解决这个问题，再次感谢您的帮助 @IslamElshobokshy - 它适用于问题（检查时克隆，取消选中时删除克隆），但本地存储在 SO 上是沙盒。将其粘贴到 jsfiddle 并在那里工作。我注释掉了这两行以隐藏它。 @Leo 您不希望在此处在克隆上使用 ID，根据 HTML 规范，ID 在文档中必须是唯一的。这就像我拥有的​​那样工作 - 没有在 *** 上不起作用的 localstorage。也可以取消选中复制 div，但必须对脚本稍作更改。 请注意，“星”复选框覆盖层上的 CSS 似乎确实需要一些工作，这可能超出了问题的范围。 @Leo 我调整了克隆以克隆“列”而不是“列”，这似乎解决了 CSS 问题。我将快速查看该事件，看看是否可以轻松地将克隆上的“取消选中”也放入激活...【参考方案3】：

@Leo，因为你问过如何在 React 中做到这一点。 演示：https://react-krwy1w.stackblitz.io/

代码：https://stackblitz.com/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.com/games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
  ,
  
    title: "some title 02",
    href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357"
  ,
  
    title: "some title 03",
    href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
    img: "https://d1bjj4kazoovdg.cloudfront.net/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'));

【讨论】：

感谢您的帮助，我解决了***.com/a/53755585/10680754再次感谢。

以上是关于选中复选框上的 Javascript 克隆此 div，未选中删除此 div的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 选中或取消选中表单上的所有复选框

Javascript：更改复选框上的标签背景颜色

如何使用 JavaScript 或 jquery 选中/取消选中复选框？

选中页面上的所有复选框

如果选中复选框，则获取当前位置

JavaScript 选中或取消选中所有复选框