Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Search</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
            crossorigin="anonymous"></script>
    <style>
        .add-controls, .search-controls {
            width: 20em;
            height: 2em;
        }
        input {
            position: absolute;
            left:6em;
        }
        .button {
            background-color: darkgrey;
            color: white;
            font-weight: bold;
            position: absolute;
            left: 15em;
            border: 1px solid black;
            padding: 0 5px 0 5px;
        }
        .result-controls .button {
            position: relative;
            left: 0;
            font-size: 50%;
            margin-right:1em;
            padding: 0;
            bottom: 3px;
        }
        li {
            list-style-type: none;
        }
    </style>
</head>
<body>
<div id="content"></div>
<script>
    domSearch("#content",false);

    function domSearch(selector, isCaseSensitive) {
        $(selector).append($('<div>').addClass('add-controls').append($('<label>').text("Enter text: ").append($('<input>')))
            .append($('<a>').addClass('button').text('Add').on('click', addItem)));

        $(selector).append($('<div>').addClass('search-controls').append($('<label>').text("Search:").append($('<input>').on('input', search))));

        $(selector).append($('<div>').addClass('result-controls').append($('<ul>').addClass('items-list')));

        function addItem() {
            let text = $('.add-controls label input').val();
            $('.items-list').append($('<li>').addClass('list-item').append($('<a>').addClass('button').text('X').on('click', deleteItem)).append($('<strong>').text(text)));
            $('.add-controls label input').val("");
        }

        function deleteItem() {
             $(this).parent().remove();
        }

        function search() {
            let text = $(this).val();

            $('.list-item').each((index, li) => matches(li, text))
        }

        function matches(li, text) {
            $(li).css('display', 'inline-block');
            if(isCaseSensitive) {
                if ($(li).find('strong').text().indexOf(text) == -1) {
                    $(li).css('display', 'none');
                }
            } else {
                if ($(li).find('strong').text().toLowerCase().indexOf(text.toLowerCase()) == -1) {
                    $(li).css('display', 'none');
                }
            }
        }
    }
</script>
</body>
</html>