CODEWITHSUNDEEP
javascriptjqueryhtml
Tammerg
Tammerg

Reputation: 121

Want to move an added element to a different part of the DOM

I'll try and state what im trying to do and hope it makes sense (i only learned this last week!). When clicking the delete button that i create, i would like the content associated along with it to go down into a panel body i created in my HTML page with a class name of 'panelAdd'. Any help is much appreciated as i am quite new. Thanks for reading. Ill put the HTML first

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <title>To Do List</title>
</head>
<body>
  <h3 class="header">
    <strong>To Do List</strong>
  </h3>
  <table class="table table-responsive myTable col-xs-offset2" id="myTable">
    <thead>
      <th>Complete?</th>
      <th>Task to Complete</th>
      <th>Time to Complete?</th>
      <th>Remove?</th>
    </thead>
    <tbody>
      <tr>
      </tr>
      <tr>
        <td><input type="checkbox" class="newCheck col-xs-offset-2" value=""></td>
        <td><input type="text" class="newWord" placeholder="New task"></td>
        <td><input type="text" class="newTime" placeholder="How long do you have?"></td>
        <td><button class="btn btn-primary buttonAdd">Add Task</button></td>
      </tr>
    </tbody>
  </table>
  <footer>
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Completed!</h3>
      </div>
        <div class="panel-body"></div>             
    </div>
  </footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/add.js"></script>
<script type="text/javascript" src="js/remover.js"></script>
</body>
</html>

Add button

$(document).ready(function (){ 
   $(".btn-primary").on("click", function(e) {
    e.preventDefault();

    var newWord, newRow, wordTd, newCheck, deleteButton, deleteTd;
    var isDuplicate;
    newWord = $(".newWord").val();
    newTime = $(".newTime").val(); 
    newCheck = $(".newCheck").val();
    var newRow = $("<tr>");
    var newCheck = $("<input>").attr("type", "checkbox").attr("class", "newCheck").attr("data-state", "not-checked");
    var wordTd = $("<td>").append(newWord).before();
    var timeTd = $("<td>").append(newTime).before();
    var deleteButton = $("<button>").addClass("btn btn-danger buttonRemove").append("Remove");
    var deleteTd = $("<td>").append(deleteButton);

    newRow.append(newCheck).append(wordTd).append(timeTd).append(deleteTd).before(); 

    $("tbody").append(newRow);
    $("#newWord").val("")
    });
  });
  $(document).on("click", ".newCheck", function(){
  if($(this).prop("checked") === true){
    $(this).parent().attr("class", "done");
  }
  else{
    $(this).parent().removeClass();
  }
});

Remove Button

$(document).ready(function (){
  $(document).on("click",".btn-danger", function(){
    $(this).parents("tr").remove();
      });
  });

Upvotes: 1

Views: 65

Answers (3)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29693

DEMO

You can just use .detach and .appendTo on click event of your remove button as below:

$(document).on("click",".btn-danger", function(){
    var detachedRow=$(this).parents("tr").detach(); //detach and store it as reference
    detachedRow.find('input[type="checkbox"]').remove();
    //I hope you don't need checkbox when task is complete so removing it from that row
    detachedRow.appendTo($('.panel .panel-body #myTableCompleted tbody'));
    append it to your completed panel
});

Note : The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

I have also added the table structure in your .panel-body to get the same UI look and have removed column for checkbox from the same and it is as below:

<div class="panel-body">
   <table class="table table-responsive myTable col-xs-offset2" id="myTableCompleted">
      <thead>
         <th>Task to Complete</th>
         <th>Time to Complete?</th>
         <th>Remove?</th>
      </thead>
      <tbody>
      </tbody>
   </table>
</div>

Note - I think there might be other requirements too like only checked checkbox to be added to that completed panel-body etc., and if yes there will be a minor change in the delete code

Upvotes: 1

John R
John R

Reputation: 2791

Do you expect like this.

Fiddle Sample

Code snippets:

$(document).on("click",".btn-danger", function(){
    var removed = $(this).parents("tr").remove();
    $(".panel-body").append('<div class="panelAdd"></div>').append(removed);
});

Let me know if this helps!

Upvotes: 1

abhishekkannojia
abhishekkannojia

Reputation: 2856

FIDDLE

Remove Button

$(document).on("click",".btn-danger", function(){
    $t = $(this).closest('tr').find('td')[0];
    $(this).parents("tr").remove();
    $('.panel-body').append($t);
   });
});

What you can do is grab the content you want to insert and append it in the target panel in this case .panel-body. See the fiddle above which adds the task name to the Completed list.

Upvotes: 1

Related Questions