1

Тема: Як видалити потрібний checkbox разом з елементом масиву?

Доброго дня. Потрібно, щоб при натисканні checkbox-у він видалявся разом з елементом масиву, що стоїть поряд. Буду вдячний за будь-яку допомогу.
Ось код: http://js.do/code/63479

2

Re: Як видалити потрібний checkbox разом з елементом масиву?

Вам обов'язково це робити на чистому JS, чи можна використовувати і фреймворки?

3

Re: Як видалити потрібний checkbox разом з елементом масиву?

ktretyak написав:

Вам обов'язково це робити на чистому JS, чи можна використовувати і фреймворки?

Було б чудово, якби на чистому JS, але якщо знаєте тільки за допомогою фреймворків, то підскажіть, покажіть :)

4

Re: Як видалити потрібний checkbox разом з елементом масиву?

Ось як це можна зробити на AngularJS

Подякували: Bygryn1

5

Re: Як видалити потрібний checkbox разом з елементом масиву?

Дуже дякую. Якщо хтось знає, як зробити на чистому JS, поділіться.

6

Re: Як видалити потрібний checkbox разом з елементом масиву?

Тут хочуть зробити це на чистому JS, але можливо автор теми не знає, що це можна зробити на чистому CSS.(або я десь не зрозумів теми)

http://codepen.io/Q-Bart/pen/ZGjgja

Подякували: Bygryn1

7 Востаннє редагувалося Bygryn (20.07.2015 17:22:07)

Re: Як видалити потрібний checkbox разом з елементом масиву?

Q-bart написав:

Тут хочуть зробити це на чистому JS, але можливо автор теми не знає, що це можна зробити на чистому CSS.(або я десь не зрозумів теми)

http://codepen.io/Q-Bart/pen/ZGjgja

Дякую, що приділили увагу, але Ваш код приховує елементи, а потрібно, щоб вони видалялись разом з елементом масиву

8

Re: Як видалити потрібний checkbox разом з елементом масиву?

Bygryn написав:

Доброго дня. Потрібно, щоб при натисканні checkbox-у він видалявся разом з елементом масиву, що стоїть поряд. Буду вдячний за будь-яку допомогу.
Ось код: http://js.do/code/63479

Привіт.
Досить морочна справа писати це діло на чистому JS.
Використовуйте краще фреймворк, адже він не тільки полегшить вам життя, а й буде великим бонусом при працевлаштуванні, де точно на чистому JS мало хто пише. Я б радив взяти на озброєння для початку - jquery.

Але все ж таки, ось короткий алгоритм:

1. Нехай кожен ваш checkbox буде мати унікальний id. Наприклад - змінна з циклу і ще якимось словом
2. Повіште обробник подій для всіх checkbox з цими ід, застосовуючи цикл
3. І тоді вже видаляйте елемент з масиву та розмітку.

Подякували: Bygryn1

9

Re: Як видалити потрібний checkbox разом з елементом масиву?

Мій варіант на чистому JS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>

<h2>Фрукти:</h2>
<form name="par" id="par"></form>

<script type="text/javascript">

var fruits = ['яблуко','груша','персик','хурма'];

for(i=0; i<fruits.length; i++)
document.getElementById('par').innerHTML+='&nbsp;&nbsp;'+'<div id="'+i+'"><input name="rbtn" onclick="del('+i+')" id="'+i+'" type="checkbox">'+fruits[i]+'</div>';

  function del(index){
  document.getElementById(index).style.display = "none";
  delete fruits[index];
  }

</script>
</body>
</html>
Подякували: 221VOLT1

10

Re: Як видалити потрібний checkbox разом з елементом масиву?

Вище Q-bart пропонував гарне рішення на CSS, але приховування через стилі автору не підходить.

11 Востаннє редагувалося VTrim (11.08.2015 17:45:00)

Re: Як видалити потрібний checkbox разом з елементом масиву?

ktretyak написав:

Вище Q-bart пропонував гарне рішення на CSS, але приховування через стилі автору не підходить.

Йому потрібно приховати і видалити з масиву fruits цей елемент.
За це відповідає

document.getElementById(index).style.display = "none";
delete fruits[index];

12

Re: Як видалити потрібний checkbox разом з елементом масиву?

А, точно, тоді все правильно. Я чомусь думав, що треба видалити HTML-елемент + JS-елемент.

13

Re: Як видалити потрібний checkbox разом з елементом масиву?

Можна звичайно й приховати з допомогою

display="none"

, але автор теми написав, що йому необхідно аби 

при натисканні checkbox-у він ВИДАЛЯВСЯ разом з елементом масиву

Тому вважаю більш доречним застосувати removeChild і скорегувати код наступним чином

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #block1 {
        height: 500px;
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border: 2px solid black;
    }
    </style>
</head>
<body>
    <div id="block1">
        <h2>Фрукти:</h2>
        <form name="par" id="par"></form>
    </div>
<script type="text/javascript">
    window.onload=function(){
        var fruits=['яблуко','груша','персик','хурма'];
        for(i=0; i<fruits.length; i++){     
            document.getElementById('par').innerHTML+='<p id="p' + i +'"><input type="checkbox" id="check' + i + '" onclick="del('+ i +');"/>' + fruits[i] +' </p>';
        }
    }
    
      function del(index){
  document.getElementById('par').removeChild(document.getElementById('p'+ index));
  delete fruits[index];
  }
</script>
</body>
</html>

14

Re: Як видалити потрібний checkbox разом з елементом масиву?

Поправлю самого себе. Ще трішки змінив код використавши замість delete (який маю підозру що не працював) метод масиву slice. Ну і виніс сам масив в глобальну область видимості.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #block1 {
        height: 500px;
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border: 2px solid black;
    }
    </style>
</head>
<body>
    <div id="block1">
        <h2>Фрукти:</h2>
        <form name="par" id="par"></form>
    </div>
<script type="text/javascript">
    var fruits=['яблуко','груша','персик','хурма'];
    
    window.onload=function(){
        for(i=0; i<fruits.length; i++){     
            document.getElementById('par').innerHTML+='<p id="p' + i +'"><input type="checkbox" id="check' + i + '" onclick="del('+ i +');"/>' + fruits[i] +' </p>';
        }
    }
    
      function del(index){
  document.getElementById('par').removeChild(document.getElementById('p'+ index));
  fruits.splice(index, 1);
  console.log(fruits);
  }
</script>
</body>
</html>

Ну і зрештою перевірив себе ввівши  console.log(fruits);

Ось результат

Post's attachments

Знімок екрана з 2015-08-12 01:55:45.png 70.44 kb, 217 downloads since 2015-08-11 

15

Re: Як видалити потрібний checkbox разом з елементом масиву?

Сергій78, читайте про оператор delete http://javascript.ru/delete

Подякували: 221VOLT1

16

Re: Як видалити потрібний checkbox разом з елементом масиву?

VTrim, з delete видаляючи елемент ви робите "дірку" в масиві. Натомість array.splice() видаляє елемент масива після чого ключі масива йдуть послідовно

arr = [0, 1, 2, 3]
delete arr[2]
// При спробі вивести масив виводить:
[0, 1, undefined × 1, 3]

// Тепер робимо знову послідовний масив
arr = [0, 1, 2, 3]
arr.splice(2, 1)
// Тепер змінна arr містить нормальний масив
[0, 1, 3]

17

Re: Як видалити потрібний checkbox разом з елементом масиву?

Ну якщо є важливим зсування індексів після видалення, то краще зі splice().
Хоча фактично це не видалення елементу, а зріз масиву, як array_splice() в PHP.
А delete тут як unset().

18

Re: Як видалити потрібний checkbox разом з елементом масиву?

Привіт.
Досить морочна справа писати це діло на чистому 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.

Подякували: 221VOLT1

19 Востаннє редагувалося ktretyak (12.08.2015 14:44:17)

Re: Як видалити потрібний checkbox разом з елементом масиву?

VTrim написав:

Ну якщо є важливим зсування індексів після видалення, то краще зі splice().
Хоча фактично це не видалення елементу, а зріз масиву, як array_splice() в PHP.
А delete тут як unset().

До речі про php, unset() та js масиви. Якщо не брати до уваги специфіку js, у якого усі ключі масива повинні бути послідовними, то можна не зрозуміти чому наступний php-код видає об'єкт замість масиву у форматі JSON:

<?php

$arr = array(0, 1, 2, 3);

echo json_encode($arr).'<br>'; // Друкує масив [0,1,2,3]

unset($arr[2]);

echo json_encode($arr).'<br>'; // Друкує об'єкт {"0":0,"1":1,"3":3}

// Але якщо тепер зробити масив з послідовними ключами, тобто
unset($arr[3]);

echo json_encode($arr); // То знову друкує масив [0,1]

20

Re: Як видалити потрібний checkbox разом з елементом масиву?

ktretyak, може тому, що при непослідовних ключах масив сприймається як асоціативний і перетворюється в обєкт.. х.з. Тому що так не звернешся $obj->0;