Jquery 取消勾选复选框时删除复制的图元

选中复选框后，下面粘贴的代码将

元素从一个

复制到另一个

。但是，当复选框未勾选时，如何删除相同的元素

  $(":checkbox").on('change', function () {

        if ($(this).hasClass('containerToCopy')) {

            if ($(this).is(':checked')) {
               $(this).closest('div').clone().appendTo("#divTestPrintContainer");

            } else {
              // if #divTestPrintContainer contains the element associated with the checkbox then remove it.                    
            }                
        }
    });

---

向复制的元素添加一个数据参数，该参数设置为原始检查的ID，当复选框未选中时，只需找到具有适当数据值的复制元素并将其删除

比如：

$(":checkbox").on('change', function () {

    if ($(this).hasClass('containerToCopy')) {

        if ($(this).is(':checked')) {
           var myClone = $(this).closest('div').clone();
           myClone.appendTo("#divTestPrintContainer");
           // Here I insert the 'data-id' attribute to the cloned element and assign
           // it the value of the id from the original element.  This is how we match
           // the cloned element with the original.
           myClone.attr('data-id', $(this).attr('id'));

        } else {
          // if #divTestPrintContainer contains the element associated with the checkbox then remove it.
          // Here we find a child element of the #divTestPrintContainer that contains
          // a 'data-id' attribute matching our checkbox id that is being unchecked.
          $('#divTestPrintContainer').find("[data-id='" + $(this).attr('id') + "']").remove();
        }                
    }
});

---

这是假设您的原始元素包含标识每个元素的id。

也许您应该尝试使用

.not（“：checked”）

---

没错，但我在#divTestPrintContainer中添加了多个。我需要删除与该复选框关联的确切子项。问题是这里可能有多个子项，每个子项都是从不同的复选框克隆的。我们只想删除属于未选中复选框的一个克隆元素，而不是所有元素。我没有元素的Id。分配这些元素并不难，只需使用递增数字或其他方式，可以在它们前面加上字符串，以确保它们不会与页面上的任何其他内容冲突。归根结底，他们需要一些独特的东西，可以用来区分他们，克隆人可以记住这些东西供以后使用。

$('#divTestPrintContainer').empty();