JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainTasks"><div class="tasks">Login and Authentication - loop<br> <div style="float: right;"> <div data-taskid="8" class="doneBtn">done</div> <div data-taskid="8" class="editBtn">edit</div> <div data-taskid="8" class="deleteBtn">delete </div>  </div> </div><div class="tasks">Session Expires<br> <div style="float: right;"> <div data-taskid="9" class="doneBtn">done</div> <div data-taskid="9" class="editBtn">edit</div> <div data-taskid="9" class="deleteBtn">delete </div>  </div> </div><div class="tasks">Global.asax is not working<br> <div style="float: right;"> <div data-taskid="10" class="doneBtn">done</div> <div data-taskid="10" class="editBtn">edit</div> <div data-taskid="10" class="deleteBtn">delete </div>  </div> </div></div>

JavaScript

$(".doneBtn").click(function(){
    $(this).parent().parent().closest("div").remove();
});