使用 jquery 删除克隆元素的一部分

Question

很难删除克隆元素中的 div。运行片段并注意不要克隆我部分即使被删除也会被附加。

let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
                clone me
                <div class="noClone">
                 do not clone me
                </div>
                <button class="clonebtn"> clone it </button>
             </div>`

$(document).ready(function() {
  let content = $(myhtml);
  $('.row').append(content);

  $('.row').on('click', '.clonebtn', function() {
    let container = $(this).closest('.mycontainer');
    let clonedContainer = container.clone();
    clonedContainer.remove('.noClone');
    $('.row').append(clonedContainer);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

  </div>
</div>

或运行这里的fiddlehttps://jsfiddle.net/k6jz9xe2/3/

Answer 1

您需要使用 .find() 找到父 div 中的所有元素，并删除 noClone 的 class。

$(selector).remove(anotherselector) in jQuery 仅从 selector 返回的数组中删除任何匹配 anotherselector 的元素。赋予 remove() 函数的选择器仅应用于 jQuery 集合中包含的元素，而不应用于这些元素的子元素。它类似于 $(selector).filter(anotherselector).remove().

考虑以下 HTML 和 jQuery 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
Foo 
<div id="bar">Bar</div>
</div>
<script>
$('#foo').remove('#bar');
</script>

您可能期望 div 和 id "bar" 里面的 div 和 id "foo" 将被删除，但这种情况并非如此。为什么？ $('#foo') 选择器 returns 一个只有一项的数组：div 和 "foo" 的 id。 jQuery 尝试 filter 通过数组并找到与 $('#bar') 选择器匹配的元素。没有找到元素，什么也不会发生。

然而，下面的选择器将删除 div 和 "bar" 的 id。

$('div').remove('#bar');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
Foo 
<div id="bar">Bar</div>
</div>
<script>
$('div').remove('#bar');
</script>

$('div') 选择器 returns 一个包含页面上所有 div 的数组。 jQuery 过滤所有 div 以找到与 $('#bar') 选择器匹配的 div（具有 "bar" 的 id）。找到一个后，将其删除。

let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
                clone me
                <div class="noClone">
                 do not clone me
                </div>
                <button class="clonebtn"> clone it </button>
             </div>`;

$(document).ready(function() {
  let content = $(myhtml);
  $('.row').append(content);

  $('.row').on('click', '.clonebtn', function() {
    let container = $(this).closest('.mycontainer');
    let clonedContainer = container.clone();
    clonedContainer.find('.noClone').remove();
    $('.row').append(clonedContainer);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

  </div>
</div>

Answer 2

let myhtml = `<div style="border: 1px solid black;" class="mycontainer">
                clone me
                <div class="noClone">
                 do not clone me
                </div>
                <button class="clonebtn"> clone it </button>
             </div>`

$(document).ready(function() {
  let content = $(myhtml);
  $('.row').append(content);

  $('.row').on('click', '.clonebtn', function() {
    let container = $(this).closest('.mycontainer');
    let clonedContainer = container.clone();
    clonedContainer.find('.noClone').remove();
    $('.row').append(clonedContainer);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">

  </div>
</div>

使用 jquery 删除克隆元素的一部分

using jquery remove part of a cloned element

javascript

jquery

jquery-clone