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){
    if($(elem).parent().attr("id")=="left-part"){
        $(elem).appendTo('#right-part');
    }
    else{
        $(elem).appendTo('#left-part');
    }
}

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

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.

javascript jquery html css
Rakesh

Answers 1

Submit Answer
  • Rakesh

    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');
  $(this).parents('h1').remove()
})
$(document).on('click', '.remove', function() {
  $(this).parents('h1').remove();
})
    div {
  border: 1px solid;
  margin-bottom: 10px;
  float:left;
  width:48%;
  min-height:200px;
}
.div-2{
  float:right
}
.div-2 .remove,
.div-1 .copy{
  float:right;
  cursor:pointer;
}
.div-2 .copy{
  display:none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
<div class="div-2">
  <h1>Element 5 <span class=remove>&times;</span></h1>
</div>

Related Articles