I got some boxes on the left that are draggable. When they are dragged, they are cloned, so you can put as many boxes as you want.

When they are dragged to the .sortable I want them to be removed by clicking on the x of a link.

<div >
  <div >
    <div  data- data-parent="w1">New block <a href="javascript:;" >X</a></div>
    <div  data- data-parent="w2">New headline <a href="javascript:;" >X</a></div>
  </div>
</div>

<div ></div>

This is my Script:

$(".sortable").sortable();

$(".structure .item1").draggable({
  connectToSortable: ".sortable",
  helper: "clone"
});

$(".remove").on("click", function () {
  alert("Hello out there!");
});

Unfortunately this x doesn't seem to do anything. Nothing happens. Do you have an idea what I'm doing wrong?

Here you find a demo https://codepen.io/alphafrau/pen/WNMJpow

CodePudding user response：

$(function() {
  $(".sortable").sortable();

  $(".structure .item1").draggable({
    connectToSortable: ".sortable",
    helper: "clone"
  });

  $(document).on("click", ".remove", function() {
    if (confirm("Are you sure you want to remove this element?")) {
      $(this).parent().remove();
      $(".sortable").sortable("refresh");
    }
  });
});

.item1 {
  border: 1px solid #ccc;
  width: 150px;
  height: 50px;
  padding: 0.5em;
}

.sortable {
  border: 1px solid #222;
  padding: 3px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div >
  <div >
    <div  data- data-parent="w1">New block <a href="javascript:;" >X</a></div>
    <div  data- data-parent="w2">New headline <a href="javascript:;" >X</a></div>
  </div>
</div>

<div ></div>

This is using the corrected event delegation.

https://api.jquery.com/on/

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.