JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li id='task1'>
        <a href='#' class='done-btn'>Done</a>
        Value1
        <a href='javascript:void(0)' class='cancel-btn'>Delete</a>
    </li>
    <li id='task2'>
        <a href='#' class='done-btn'>Done</a>
        Value2
        <a href='javascript:void(0)' class='cancel-btn'>Delete</a>
    </li>
    <li id='task3'>
        <a href='#' class='done-btn'>Done</a>
        Value3
        <a href='javascript:void(0)' class='cancel-btn'>Delete</a>
    </li>   
</ul>

JavaScript

var tasks = ["Value1","Value2","Value3"];

$(document).delegate('.cancel-btn', 'click', function() {    
    var nameOfTask =  $(this).parent('li').clone().children().remove().end().text().trim();
var index = tasks.indexOf(nameOfTask.toString());
 tasks.splice(index,1);
localStorage["tasks"] = JSON.stringify(tasks);
    
});