使用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> 

或者在这里运行小提琴https://jsfiddle.net/k6jz9xe2/3/

Answer 1

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

jQuery中的$(selector).remove(anotherselector)仅从selector返回的Array中删除与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 “foo”的id “bar”的div将被删除，但事实并非如此。 为什么？ $('#foo')选择器返回一个只有一个项的数组： id为“foo”的div 。 jQuery尝试filter数组并找到与$('#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> 

$('div')选择器返回一个包含页面上所有div的数组。 jQuery过滤所有div以找到与$('#bar')选择器匹配的div （ 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> 

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>