using jquery remove part of a cloned element

Question

having a difficult time removing a div inside of a cloned element. run the snippet and notice the do not clone me part gets appended even though it is removed.

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>

or run the fiddle here https://jsfiddle.net/k6jz9xe2/3/

Unmitigated · Answer 1 · 2018-08-16T00:23:56.593

You need to use .find() to find all elements inside the parent div with a class of noClone to remove.

$(selector).remove(anotherselector) in jQuery only removes any elements matching anotherselector from the Array returned by selector. The selector given to the remove() function is only applied to the elements contained in the jQuery collection not to the children of those elements. It is analogous to $(selector).filter(anotherselector).remove().

Consider the following HTML and jQuery code:

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

You may expect that the div with the id "bar" inside the div with the id "foo" will be removed, but this is not the case. Why? The $('#foo') selector returns an Array with just one item: the div with the id of "foo". jQuery attempts to filter through the Array and find an element matching the $('#bar') selector. No element is found and nothing will happen.

The following selector, however, will remove the div with the id of "bar".

$('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>

The $('div') selector returns an Array with all the divs on the page. jQuery filters through all of the divs to find an div matching the $('#bar') selector (having an id of "bar"). Having found one, it removes it.

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>

let me take this one i am learner I just got hyped to know this :D — Learner, Aug 15 '18 at 23:53
According to https://api.jquery.com/remove/ you can pass a selector as a parameter. — Lee Taylor, Aug 15 '18 at 23:56
@lee Taylor I also read that in documentation so unsure why my original post is not working without the .find() — Bryan Dellinger, Aug 16 '18 at 00:01

score 0 · Accepted Answer · answered Aug 15 '18 at 23:53

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>

answered Aug 15 '18 at 23:53

Learner

723
3
13
36

2

Please do not just post code as your answer. What was wrong and what have you fixed? – Lee Taylor Aug 15 '18 at 23:57
I copied `".noClone"` inside find() function since we don't know where is element, it could be first child or child of child so I just added find() with wanted selector :D – Learner Aug 16 '18 at 00:00
According to the documentation, you can put a parameter in `remove()` – Lee Taylor Aug 16 '18 at 00:01
I seen it and removed from comment, but it does not worked like any time for me :D Thats why I was so hyped to know this :D – Learner Aug 16 '18 at 00:02

using jquery remove part of a cloned element

2 Answers2