0

以下の貼り付けられたコードは、チェックボックスをオンにすると、要素をある<table>要素から<div>別の要素にコピーします。しかし、チェックボックスがオフ<div>のときに同じ要素を削除するにはどうすればよいですか。

  $(":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.                    
            }                
        }
    });
4

3 に答える 3

2

元のチェックの 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 が含まれていることを前提としています。

于 2013-07-16T22:42:47.250 に答える