jquery remove () не работает должным образом

Question

$('ul#a li')
  .click(function() {
    alert('List Item Clicked')
  })
  .parent()
  .clone(true)
  .find('li')
  .appendTo('#b')
  .end()
  .end()
  .remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>
<ul id="b"></ul>

Я думал, .remove() удалит ul#a, но не удаляется, как ожидалось.

Answer 1

Вам нужен еще один звонок на .end(). Вы удаляете клон ul#a, а не оригинал.

Полагаю, appendTo() помещается в стек объектов jQuery, поэтому вам нужно закончить это.

$('ul#a li')
  .click(function() {
    alert('List Item Clicked')
  })
  .parent()
  .clone(true)
  .find('li')
  .appendTo('#b')
  .end()
  .end()
  .end()
  .remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="a">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>
<ul id="b"></ul>