javascript - 如何将html div复制到另一个div而不显示none div

我有一个像下面的结构。在lookbook-pointadding中，我只需要复制设置了div的display: block元素。

我的代码没有用div删除display: none。

我也尝试了$("#lookbook-pointadding").clone().appendTo("#lookbook-pointedit")，但它也无法正常工作。

谁能告诉我我要去哪里错了？

<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);
})

最佳答案

要解决此问题，您可以使用:visible选择器仅检索DOM中显示的子div元素。然后，您可以clone()将它们附加到所需的目标上。尝试这个：

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