删除特定的附加元素

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> 

Answer 2

您可以根据img来源删除元素：

 var src; $("input:checkbox").on("change", function() { if ($(this).prop('checked') == true) { $(this).parent().clone().appendTo("body").addClass("new"); $(".new input").remove(); } else { src = $(this).parent().find('img:first').prop('src'); $(".new").find('[src="' + src + '"]').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>