3

很难删除克隆元素内的 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/

4

2 回答 2

1

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

$(selector).remove(anotherselector)在 jQuery 中，仅从.anotherselector返回的 Array中删除任何匹配的元素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 中带有“bar”的 divid将被删除，但事实并非如此。为什么？选择$('#foo')器返回一个只有一项的数组：div带有id“foo”的。jQuery 尝试filter通过 Array 并找到与选择器匹配的元素$('#bar')。没有找到任何元素，也不会发生任何事情。

但是，以下选择器将删除带有id“bar”的 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>

选择器返回一个包含页面上所有 s$('div')的 Array 。divjQuery 过滤所有divs 以找到div匹配的$('#bar')选择器（具有id“bar”）。找到一个，它会删除它。

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>

于 2018-08-15T23:48:49.927 回答
0 

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>

于 2018-08-15T23:53:12.983 回答