Question

我正在玩一些jquery，当我试图创建一个简单的待办事项列表时，我遇到了一个问题。

到目前为止，目标是能够通过单击绿色方块添加段落，然后通过单击一次将其删除，然后将其拖动到红色方块。

除了删除拖动的段落外，一切正常。

现在它只能删除整个类，但我只想删除拖动的类。

此处代码为：https://codepen.io/anon/pen/OXXXpY

jQuery的：

$(document).ready(function() {

  var send = $("#send");
  var dlt = $("#delete");

  send.click(function() {

      var input = $("input").val();

      $("#container").prepend("<p class='entry'>" + input + "</p>");


  });

  $(document).on("click", ".entry", function() {

      $(this).draggable();
      $("#delete").droppable({

        drop: function() {$(".entry").remove();}
      });
  });


});

请不要介意我的英语和这个项目的实际用途。这只是一个jQuery实验。

Answer 1

使用$(this)定位拖动的元素

$(document).on("click", ".entry", function() {
      var $this = $(this);
      $(this).draggable();
      $("#delete").droppable({

        drop: function() {
          $($this).remove();
        }
      });
});

＆＃13;

$(document).ready(function() {

  var send = $("#send");
  var dlt = $("#delete");

  send.click(function() {

      var input = $("input").val();
      $("#container").prepend("<p class='entry'>" + input + "</p>");

  });

  $(document).on("click", ".entry", function() {
      var $this = $(this);
      $(this).draggable();
      $("#delete").droppable({
        drop: function() { $($this).remove(); }
      });
  });

});

＆＃13;

body {
  text-align: center;
}
h1 {
  font-family: Helvetica;
}
form input {
  width: 500px;
  font-size: 30px;
}
form input:focus {
  outline: none;
}
.inline {
  display: inline-block;
}
#send {
  width: 40px;
  height: 40px;
  background-color: green;
}
#delete {
  width: 40px;
  height: 40px;
  background-color: red;

}
.entry {
  font-family: helvetica;
  border: solid 1px grey;
  -webkit-user-select: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<h1>ToDo</h1>
<form class="">
        <div class="inline" id="delete"></div>
          <input type="text" name="input" value="">
        <div class="inline" id="send"></div>
</form>
<div id="container"></div>

＆＃13;

Jquery拖动到删除

1 个答案: