Привіт.
Досить морочна справа писати це діло на чистому JS.
Використовуйте краще фреймворк, адже він не тільки полегшить вам життя, а й буде великим бонусом при працевлаштуванні, де точно на чистому JS мало хто пише. Я б радив взяти на озброєння для початку - jquery.
Bygryn, привітайтесь з типовими web, JavaScript програмістами — BarsicPlus та рештою. В своєму ВНЗ так і скажете що без jQuery робить не будете. І пошлете куди подалі викладача.
Мій говнокод:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function get_text_node_after_checkbox(checkbox) {
var currentS = checkbox.nextSibling;
if (currentS == null) {return -1;}
console.log(currentS);
if (currentS.nodeType != 3 && currentS.nodeName.toLowerCase() !== 'text' )
{
return arguments.callee(currentS);
}
else {
return currentS;
}
}
function get_next_sibling(el) {
var currentS = el.nextSibling;
if (currentS == null) {return -1;}
console.log(currentS);
if (currentS.nodeType != 1 && currentS.nodeName.toLowerCase() !== 'input' )
{
return arguments.callee(currentS);
}
else if (currentS.type && currentS.type == 'checkbox') {
return currentS;
}
}
function get_prev_sibling(el) {
var currentS = el.previousSibling;
if (currentS == null) {return -1;}
console.log(currentS);
if (currentS.nodeType != 1 && currentS.nodeName.toLowerCase() !== 'input' )
{
return arguments.callee(currentS);
}
else if (currentS.type && currentS.type == 'checkbox') {
return currentS;
}
}
function assign_checkbox_check_event_handler() {
var delete_me_collection = document.getElementsByClassName('delete_me');
for (var i = 0, l = delete_me_collection.length; i < l; i++) {
var current_li = delete_me_collection[i];
current_li.addEventListener(
'click',
function () {
var sibling_checkbox;
var sibling_checkbox_text;
sibling_checkbox = get_next_sibling(this);
console.log(sibling_checkbox);
if (sibling_checkbox === -1) { sibling_checkbox = get_prev_sibling(this); }
if (sibling_checkbox !== -1)
{
console.log(sibling_checkbox);
sibling_checkbox_text = get_text_node_after_checkbox(sibling_checkbox);
sibling_checkbox_text.parentNode.removeChild(sibling_checkbox_text);
sibling_checkbox.parentNode.removeChild(sibling_checkbox);
}
this.parentNode.removeChild(this);
}
);
}
}
document.addEventListener('DOMContentLoaded', assign_checkbox_check_event_handler, false);
</script>
</head>
<body>
<input type="checkbox" class="delete_me" value="Яблуко"/>Яблуко
<input type="checkbox" class="delete_me" value="груша"/>груша
<input type="checkbox" class="delete_me" value="персик"/>персик
<input type="checkbox" class="delete_me" value="хурма"/>хурма
</body>
</html>
Не видаляється текст checkbox по якому натиснули і якщо натиснути по останньому елементу, то видаляється не той що перший а той що зліва. Працює в Mozilla Firefox 41.0a2.
