CODEWITHSUNDEEP
javascriptjquery
someoneuseless
someoneuseless

Reputation: 294

How to copy html div to another div without display none div

I have a structure like below. In lookbook-pointadding I need to copy only the div elements where the display: block is set.

My code doesn't remove the div with display: none.

I also tried $("#lookbook-pointadding").clone().appendTo("#lookbook-pointedit") but it is not working also.

Can anyone tell where I'm going wrong?

<div id="lookbook-pointedit"></div>
<div id="lookbook-pointadding">
  <div class="drag" style="display: none">A</div>
  <div class="drag" style="display: none">B</div>
  <div class="drag" style="display: block">C</div>
  <div class="drag" style="display: none">D</div>
  <div class="drag" style="display: block">E</div>
</div>

$('#submit').click(function(e) {
  e.preventDefault();
  if ($('#lookbook-pointadding.drag').css('display') == 'none') {
    $(this).remove(); //already tried $('#lookbook-pointadding.drag').removed();
  }
  var point = $('div#lookbook-pointadding').html();
  $('#lookbook-pointedit').append(point);
})

Upvotes: 2

Views: 674

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337691

To fix this you can use the :visible selector to retrieve only the child div elements which are shown in the DOM. Then you can clone() them and append to the required target. Try this:

$('#submit').click(function(e) {
  e.preventDefault();
  var $clones = $('#lookbook-pointadding div:visible').clone();
  $('#lookbook-pointedit').append($clones);
})
#lookbook-pointedit {
  color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lookbook-pointedit"></div>
<div id="lookbook-pointadding">
  <div class="drag" style="display: none">A</div>
  <div class="drag" style="display: none">B</div>
  <div class="drag" style="display: block">C</div>
  <div class="drag" style="display: none">D</div>
  <div class="drag" style="display: block">E</div>
</div>
<button id="submit">Submit</button>

Upvotes: 3

Related Questions