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