How to remove Dynamically created row in the table by performing DND using Jquery?

Question

I need to remove the row from the Right Hand side table by performing Drag and Drop operation over Left Hand Side Table. Dragging the row from Table2 to Table1 should remove the row from Table2 Table.

Here is my code :

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Insert title here</title>
<style>
ul {
    list-style: none;
    padding: 0;
    min-height: 12em;
}

li:nth-child(1n) {
    background-color: #a6dbed;
}

div {
    float: left;
    margin: 10px;
    border: 1px solid black;
    min-width: 40%;
}

li {
    cursor: all-scroll;
}
</style>
<script>
    $(function() {

        $("#sortable2").sortable(
                {
                    receive : function(event, ui) {
                        var pasteItem = checkList("sortable2",
                                $(this).data().uiSortable.currentItem);
                        if (!pasteItem) {
                            $(this).data().uiSortable.currentItem.remove();
                        }
                    }
                });

        $("#sortable1 li").draggable({
            connectToSortable : "#sortable2",
            helper : "clone",
            revert : "invalid"
        });
    });

    function checkList(listName, newItem) {
        alert 
        var dupl = false;
        $("#" + listName + " > li").each(function() {
            if ($(this)[0] !== newItem[0]) {
                if ($(this).html() == newItem.html()) {
                    dupl = true;
                }
            }
        });
        return !dupl;
    }
</script>
</head>
<body>
    <div>
        <h3>Available Institutions</h3>
        <ul id="sortable1" class="connectedSortable">
            <li class="ui-state-default" id="k1">Items1</li>
            <li class="ui-state-default" id="k2">Items2</li>
            <li class="ui-state-default" id="k3">Items3</li>
            <li class="ui-state-default" id="k4">Testing4</li>
            <li class="ui-state-default" id="k5">Testing5</li>
        </ul>
    </div>
    <div>
        <h3>Institutions to the Group</h3>
        <ul id="sortable2" class="connectedSortable">
        </ul>
    </div>
</body>
</html>

Actually what are you trying to achieve..? what does the function do..? Why can't you just make both the lists connected sortables..? — T J, Nov 04 '14 at 17:33
I can do that . But i want the values of table1 to be stable. Connected sortable will remove values from table1. i don't want that. I want to remove the values from Table2, if we drag the value from table 2 and drop it in table1. — Naren Pamsa, Nov 05 '14 at 05:47

T J · Accepted Answer · 2014-11-06T13:50:15.260

For removing the item dropped into first list, You should initialize it as droppable() as well. You can remove the item using it's drop event callback as shown below:

$(function() {

  $("#sortable1 li").draggable({
    connectToSortable: "#sortable2",
    helper: "clone",
    revert: "invalid",
  }).droppable({
    drop: function(event, ui) {
      if (ui.draggable.parent().attr("id") == "sortable2")
        ui.draggable.remove(); // remove the item
    }
  });

  $("#sortable2").sortable({
    receive: function(event, ui) {
      var pasteItem = checkList("sortable2",
        $(this).data().uiSortable.currentItem);
      if (!pasteItem) {
        $(this).data().uiSortable.currentItem.remove();
      }
    }
  });
});

function checkList(listName, newItem) {
  alert
  var dupl = false;
  $("#" + listName + " > li").each(function() {
    if ($(this)[0] !== newItem[0]) {
      if ($(this).html() == newItem.html()) {
        dupl = true;
      }
    }
  });
  return !dupl;
}

ul {
  list-style: none;
  padding: 0;
  min-height: 12em;
}
li:nth-child(1n) {
  background-color: #a6dbed;
}
div {
  float: left;
  margin: 10px;
  border: 1px solid black;
  min-width: 40%;
}
li {
  cursor: all-scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div>
  <h3>Available Institutions</h3>

  <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="k1">Items1</li>
    <li class="ui-state-default" id="k2">Items2</li>
    <li class="ui-state-default" id="k3">Items3</li>
    <li class="ui-state-default" id="k4">Testing4</li>
    <li class="ui-state-default" id="k5">Testing5</li>
  </ul>
</div>
<div>
  <h3>Institutions to the Group</h3>

  <ul id="sortable2" class="connectedSortable"></ul>
</div>

Thank you so much !!. your solution solved my one answer, but on the another side, it is giving one more problem. actually when we sort item in Table1. the items actually getting deleted due to "ui.draggable.remove();" // . Can you please help me here :) — Naren Pamsa, Nov 06 '14 at 04:35
@NarenPamsa this can be solved... But I don't understand what you're saying - *"when we sort item in Table1"*. `#sortable1` (*assuming that is what you're referring to by `Table1`*) is`draggable()`, not `sortable()`, then how can you sort items in it..? Also, your custom code is throwing errors even though it is not blocking the functionality. So if you can update the question explaining what you're trying to do overall, maybe I can help with that as well. BTW Those are not tables, those are *lists*, It'd be easy to understand if you use those terms.. :) — T J, Nov 06 '14 at 05:03
okay. sorry. Actually if i drag a item from #sortable1 and if suppose i drop the item in #sortable1 table itself ,then, it is getting removed from #sortable1 table. i don't want that to be happen. Can you please help me. i want items to be stable in #sortable1 table. — Naren Pamsa, Nov 06 '14 at 13:31

How to remove Dynamically created row in the table by performing DND using Jquery?

1 Answers1