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>

或在https://jsfiddle.net/k6jz9xe2/3/

摆弄小提琴

Answer 1

您需要使用.find()来查找父div内的所有元素，并删除noClone类。

jQuery中的

$(selector).remove(anotherselector)仅从anotherselector返回的数组中删除与selector匹配的所有元素。给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>

您可能希望将带有id“ foo”的div内带有id“ bar”的div删除，但事实并非如此。为什么？ $('#foo')选择器返回一个只有一项的数组：div，其中id为“ foo”。 jQuery尝试filter遍历数组并找到与$('#bar')选择器匹配的元素。没有找到元素，什么也不会发生。

但是，以下选择器将删除带有“ {bar”的id的div。

$('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')选择器将返回一个包含页面上所有div的数组。 jQuery对所有div进行过滤，以找到与div选择器匹配的$('#bar')（具有“ {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删除克隆元素的一部分

2 个答案: