Create a function for a certain item in array

Question

I'm trying to create a text input using key navigation. With left and right arrows you choose position, on enter you activate the current letter and then you can choose letter with up and down keys.

What I want to achieve is a delete function, so for example, if I choose the < sign and press enter the current letter should be deleted or at least not visible. Is this even possible to do without using more keys?

This is my code:

var app = angular.module('ccApp',[]);

    var letters = [
                    '<','a','b','c','d','e','f','g','h','i','j','k','l','m','n'
                ];

    app.controller("ccInputController",function($scope, $http) {

        $('li:first').focus();

            $('li').on('keydown', function(e){

                    e.preventDefault();

                    var keyCode = e.which;
                        key = {up: 38, down: 40, right: 39, left: 37, enter: 13};

                    letterIndex = letters.indexOf($(this).html());

                    switch(e.which) {
                        case key.up:
                        if ($('li').hasClass('active')) {
                            letterIndex = letterIndex + 1;
                                $(this).html(letters[letterIndex]);
                        }

                        break;

                        case key.down:
                            if ($('li').hasClass('active')) {
                            letterIndex = letterIndex - 1;
                                $(this).html(letters[letterIndex]);
                        }
                        break;

                        case key.right:
                            // check if li is not active, then move right
                            if (!$('li').hasClass('active')) {
                                $('li:focus').closest('li').next().focus();
                            }
                        break;

                        case key.left:
                            // check if li is not active, then move left
                            if (!$('li').hasClass('active')) {
                                $('li:focus').closest('li').prev().focus();
                            }
                        break;

                        case key.enter:
                            $(this).closest('li').toggleClass('active');
                        break;

                    }

            });
        });

And the HTML:

<ul>
    <li tabindex="0">i</li>
    <li tabindex="0">n</li>
    <li tabindex="0">p</li>
    <li tabindex="0">u</li>
    <li tabindex="0">t</li>
</ul>

Fiddle

Answer 1

To remove any element using jquery, simply call remove(). In your case, on the enter handler, after validating the value matches, use $(this).remove().

Also, you need to use .text() instead of .html() because the < gets transformed to < in html.

Corrected fiddle