javascript - 删除特定的附加元素

Question

假设我有复选框(a、b、c)，如果一个复选框被选中(例如 b)，那么我将其副本附加到“x”类，问题是“如何删除创建的副本( b) 在初始复选框上取消选中？”。此刻我正在删除所有创建的元素，因为我不知道其他解决方案。 https://jsfiddle.net/qnsgbyra/12/

$("input:checkbox").on("change", function() {
  if ($(this).prop('checked') == true) {
    $element = $(this).parent().clone().appendTo("body").addClass("new");
    $(".new input").remove();
  }
  if ($(this).prop('checked') == false) {
    $(".new").remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="users">
  <label><input type="checkbox" name="1"><img draggable="false" src="https://via.placeholder.com/50x50" alt="1"></label>
</div>
<div class="users">
  <label><input type="checkbox" name="2"><img draggable="false" src="https://via.placeholder.com/60x60" alt="2"></label>
</div>
<div class="users">
  <label><input type="checkbox" name="3"><img draggable="false" src="https://via.placeholder.com/70x70" alt="1"></label>
</div>

Answer 1

当您添加元素时，只需在新添加​​的元素上创建一个唯一的类，当取消选中该复选框时，使用新类删除该元素。

在这个答案中，我使用输入复选框名称创建了唯一类。所以新类是"new"+Checkbox_name

	$("input:checkbox").on("change", function() {
		 if ($(this).prop('checked')==true){ 
			$element = $(this).parent().clone().appendTo("body").addClass("new"+$(this).attr('name'));
      $(".new"+$(this).attr('name')+" input").remove();
		}
		 if ($(this).prop('checked')==false){ 
			$(".new"+$(this).attr('name')).remove();
		}
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="users">
<label><input type="checkbox" name="1"><img draggable="false" src="https://via.placeholder.com/50x50" alt="1"></label>
</div>
<div class="users">
<label><input type="checkbox" name="2"><img draggable="false" src="https://via.placeholder.com/60x60" alt="2"></label>
</div>
<div class="users">
<label><input type="checkbox" name="3"><img draggable="false" src="https://via.placeholder.com/70x70" alt="1"></label>
</div>