how to move element to another element then auto fulfill some divs

I would like to use picture to demonstrate my doubt.

enter image description here

For example, i would like to move Boston to the right, which would under USA_LL - United States - Low Pay. My code is below:

function move(elem){

the html code is below:

<div class="panel-body" id="left-part">
  <div class="item"  onclick="move(this)">
    <div class="row">
      <div class="col-md-2 item_position"><p class="item-words">Boston(BOS)</p></div>
      <div class="col-md-2 arroww"><img class="img-responsive arrow_1" src="file:///Users/cengcengruihong/Desktop/bootstrap%20exercise/static/images/[email protected]" alt="arrow" width="18px"></div>
<div class="panel-body" id="right-part">
  <div class="item2"  id="removed">
    <div class="row">
      <div class="col-md-2 item_position2"><p class="item-words">CAN-Canada</p></div>
      <div class="col-md-2 edit_position" style=""><a href="#"><img class="img-responsive edit" src="[email protected]" alt="edit"></a></div>
      <div class="col-md-1 remove"><a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>

But the output just put the arrow to the right too. What i want is Boston moved to the right without the arrow and also with the edit and cancel icon.

Anyone could give me a hint would be highly appreciated.

Answers 1

  • This structure can help you. You can clone element using clone() and then append it to another div using .appendTo().

    $('.copy').click(function() {
      $(this).parents('h1').clone().append('<span class=remove>&times;</span>').appendTo('.div-2');
    $(document).on('click', '.remove', function() {
    div {
      border: 1px solid;
      margin-bottom: 10px;
    .div-2 .remove,
    .div-1 .copy{
    .div-2 .copy{
    <script src=""></script>
    <div class="div-1">
      <h1>Element 1 <span class=copy>&rarr;</span></h1>
      <h1>Element 2 <span class=copy>&rarr;</span></h1>
      <h1>Element 3 <span class=copy>&rarr;</span></h1>
      <h1>Element 4 <span class=copy>&rarr;</span></h1>
    <div class="div-2">
      <h1>Element 5 <span class=remove>&times;</span></h1>

Related Articles