I work with jQuery UI dragable and resizable object.

Here u can see example

As u can see at top i have 2 inputs at which user add some Width and Height parameters, after clicking ob button Add area user can see new area at the view.

In hover i add remove button, but this button not vorking as aspect. First object this button deleted, but if user add few object and for example want to remove object #3 it's not deleting.

I try few method to delete object but it's not working.

For now i use this method to deleting:

$(document).on("mouseover", function(event) {
  console.log('#'   event.target.id   '')
  $('#'   event.target.id   '').find("#delete-area").toggleClass("hide")
  $('#'   event.target.id   '').find("#delete-area").toggleClass("gg-remove")
  $("#delete-area").click(function() {
    $('#'   event.target.id   '').parent().remove();
  });
});

But this deleting all view from page.

CodePudding user response：

The problem is that you are having multiple elements with the same id. ID should always be unique.

$(document).on("mouseenter",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("mouseleave",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});

$(document).on("click",".delete-area",function() {
  $(this).parent().remove();
});

I've changed the id to class in js code, and now it works.

Also having a click event inside a another event, will keep generating the click event every time the other event is triggered. I've moved your code a bit

I would also recommend that you use mouseenter and not mouseover.

Demo

var count = 0;

$(".lpms-3-button").click(function() {
  count  = 1;

  var areaWith = $("#width-area").val();
  var areaHeight = $("#height-area").val();
  var areaColor = $("#text").val();
  var valueStream = $("#valueStream option:selected").text();
  console.log(areaWith, areaHeight, valueStream)
  var objects1 = `<div  data-value-stream="${valueStream}" id="boxVs${count}" style="width:${areaWith   "px"};height:${areaHeight   "px"}; left: 0px; top: 0px; background-color: #ccc ">
<a href="#" id="" ></a >

</div>`

  $(".grid").append(objects1);
  $(".grid-item").draggable({
    grid: [10, 10],
    snap: ".drop-target"
  });

  $(".drop-target").droppable({
    accept: ".drag-item"
  });
  $('.grid-item').resizable();
  $("#width-area").val("");
  $("#height-area").val("");
  $("#text").val("")
});

var myDraggable = $('.grid-item').draggable();
var widget = myDraggable.data('ui-draggable');
var clickEvent = null;

myDraggable.click(function(event) {
  if (!clickEvent) {
    widget._mouseStart(event);
    clickEvent = event;
  } else {
    widget._mouseUp(event);
    clickEvent = null;
  }
});

$(document).on("mouseenter",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});
$(document).on("mouseleave",".grid-item", function(event) {
  $(this).find(".delete-area").toggleClass("hide gg-remove")
});

$(document).on("click",".delete-area",function() {
  $(this).parent().remove();
});

.resizable {
  position: absolute;
  bottom: 2px;
  right: 5px;
  cursor: pointer;
}

.drop-target {
  width: 100%;
  height: 100vh;
  border: dashed 1px orange;
  background: whitesmoke url('https://s3.amazonaws.com/com.appgrinders.test/images/grid_20.png') repeat;
}

.area-builder {
  display: contents;
}



.gg-remove {
  box-sizing: border-box;
  position: relative;
  display: block;
  float: right;
  top: 5px;
  right: 5px;
  transform: scale(var(--ggs, 1));
  width: 22px;
  height: 22px;
  border: 2px solid;
  border-radius: 22px
}

.gg-remove::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 5px;
  top: 8px;
  left: 4px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div >
  <input type="number" min="0" id="width-area"  placeholder="Width">
  <input type="number" min="0" id="height-area"  placeholder="Height">
  <select id="valueStream">
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
  </select>
  <button type="button" >Add area</button>
</div>


<div >
  <div >
  </div>
</div>