如何删除动态创建的对象 jQuery UI

Question

我使用 jQuery UI 可拖动和可调整大小的对象。

正如您在顶部看到的，我有 2 个输入，用户可以在其中添加一些宽度和高度参数，单击 ob 按钮后 添加区域 用户可以在视图中看到新区域。

在悬停时我添加了删除按钮，但是这个按钮并没有作为方面起作用。这个按钮删除了第一个对象，但是如果用户添加了几个对象，例如想要删除对象#3，它就不会删除。

我尝试了几种删除对象的方法，但都不起作用。

现在我用这个方法删除：

$(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();
  });
});

但是这会删除页面中的所有视图。

Answer 1

问题是您有多个具有相同 ID 的元素。 ID 应始终是唯一的。

$(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();
});

我在js代码中把id改成了class，现在可以了

在另一个事件中还有一个点击事件，每次触发另一个事件时都会继续生成点击事件。我稍微移动了你的代码

我还建议您使用 mouseenter 而不是鼠标悬停。

演示

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 class="grid-item" data-value-stream="${valueStream}" id="boxVs${count}" style="width:${areaWith + "px"};height:${areaHeight + "px"}; left: 0px; top: 0px; background-color: #ccc ">
<a href="#" id="" class="btn btn-remove  hide delete-area"></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 class="area-builder">
  <input type="number" min="0" id="width-area" class="form-control" placeholder="Width">
  <input type="number" min="0" id="height-area" class="form-control" 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" class="lpms-3-button">Add area</button>
</div>


<div class="drop-target">
  <div class="grid">
  </div>
</div>

如何删除动态创建的对象 jQuery UI

How to remove dynamicaly created object jQuery UI

javascript

jquery

jquery-ui