Jquery Drag to Delete

Question

Ich spiele gerade mit etwas Jquery und als ich versuchte eine einfache Todo-Liste zu erstellen, stieß ich auf ein Problem.

Bisher ist es das Ziel, Absätze hinzufügen zu können, indem Sie auf das grüne Quadrat klicken und sie entfernen, indem Sie einmal darauf klicken und dann auf das rote Quadrat ziehen.

Alles funktioniert gut außer dem Löschen des gezogenen Absatzes.

Momentan funktioniert es nur durch Entfernen der gesamten Klasse, aber ich möchte nur die gezogene löschen.

Hier den Code: 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();} 
     }); 
    }); 


}); 

Bitte mein Englisch und die reale Verwendung dieses Projekt nichts dagegen. Dies ist nur ein jQuery-Experiment.

Answer 1

Verwenden $(this) das gezogene Element

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

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

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

 
});

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; 
 
}

<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>