Remove Element from JavaScript array in .NET core Razor

Question

I have input when the user click on add button it should add a new li in the ul list and add a new object in array "Keywords" to send it to the action, but the problem is when the user removes an element from the ul list I remove the index of the element from the array it didn't work however the removal of the li element works well. here is the script:

and this is the HTML:

Answer 1

Try to change

delbtns = $(".delete");
        for (var i = 0; i < delbtns.length; i++) {
            delbtns[i].onclick = function () {
                this.parentNode.remove();
                keywords.splice(i, 1);
            }
        }

to

$(".delete").on('click', function (event) {
            var delbtns = $(".delete");
            for (var i = 0; i < delbtns.length; i++) {
                if (this == delbtns[i]) {
                    this.parentNode.remove();
                    keywords.splice(i, 1);
                    break;
                }
            }
        })

result: