pokatomnik/checkbox-list.html

## checkbox-list.html
<!doctype html>
<html>
    <head>
        <style>
            .list {
                width : 250px;
            }
            .list table tbody tr td:first-child {
                min-width: 250px;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var list = document.querySelector('.list table tbody');
                var inputText = document.querySelector('.controls #text');
                var addButton = document.querySelector('.controls #add');
                var removeButton = document.querySelector('.controls #remove');

                addButton.addEventListener('click', function () {
                    if (inputText.value !== '') {
                        list.innerHTML +=
                            '<tr><td>'+
                            inputText.value+
                            '</td><td>'+
                            '<input type="checkbox">'+
                            '</td></tr>';
                    } else {
                        alert('Fill the form text please')
                    }
                });

                removeButton.addEventListener('click', function () {
                    document
                        .querySelectorAll('input[type="checkbox"]:checked')
                        .forEach(function (currentValue, index, array) {
                            currentValue.parentElement.remove
                                ? currentValue.parentElement.parentElement.remove()
                                // IE 11 fix
                                : currentValue.parentElement.parentElement.removeNode();
                        });
                });
            });
        </script>
    </head>
    <body>
        <div class="list">
            <table>
                <tbody>
                    <tr>
                        <td>
                            C++
                        </td>
                        <td>
                            <input type="checkbox">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="controls">
            <input id="text" type="text">
            <button id="add">Add</button>
            <button id="remove">Remove</button>
        </div>
    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	.list {
	width : 250px;
	}
	.list table tbody tr td:first-child {
	min-width: 250px;
	}
	</style>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
	var list = document.querySelector('.list table tbody');
	var inputText = document.querySelector('.controls #text');
	var addButton = document.querySelector('.controls #add');
	var removeButton = document.querySelector('.controls #remove');

	addButton.addEventListener('click', function () {
	if (inputText.value !== '') {
	list.innerHTML +=
	'<tr><td>'+
	inputText.value+
	'</td><td>'+
	'<input type="checkbox">'+
	'</td></tr>';
	} else {
	alert('Fill the form text please')
	}
	});

	removeButton.addEventListener('click', function () {
	document
	.querySelectorAll('input[type="checkbox"]:checked')
	.forEach(function (currentValue, index, array) {
	currentValue.parentElement.remove
	? currentValue.parentElement.parentElement.remove()
	// IE 11 fix
	: currentValue.parentElement.parentElement.removeNode();
	});
	});
	});
	</script>
	</head>
	<body>
	<div class="list">
	<table>
	<tbody>
	<tr>
	<td>
	C++
	</td>
	<td>
	<input type="checkbox">
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="controls">
	<input id="text" type="text">
	<button id="add">Add</button>
	<button id="remove">Remove</button>
	</div>
	</body>
	</html>