Как оптимальнее всего проверять есть такой элемент или нет?

Question

[Игорь]

полный код

isc.96.lt/t/inputTest/js/main.js

var inputs= checkBoxes.getElementsByTagName('input');

 function creatSelected(){

 // console.log(inputs);

  for(var i=0; i<inputs.length; i++){

    if(inputs[i].checked ===true ){
      var creatDiv = document.createElement('div');

      creatDiv.innerHTML =inputs[i].parentNode.textContent;
      creatDiv.classList.toggle('educationCreate');

      multySelect.appendChild(creatDiv);

     console.log(inputs[i].parentNode.textContent );

    };

  };

  //console.log(inputs.length);

 };

Чтобы не создавались одинаковые элементы,и если галочка снята то удалять такой див снизу.

я думал циклом проверять innerHTML каждого созданного дива с классом "educationCreate",но может есть более оптимизированные решения?

или при выборе элемента, создавать элемент с id=’select_visshee’, и при снятии галочки искать элемент по идентификатору который складывается из ’select_’+(name чекбокса)

Comments

[Игорь]

Ridz важно ваше мнение)

Answer 1

[Ridz]

window.addEventListener("DOMContentLoaded", function() {
    var clickHandler = "click";
    if ("ontouchstart" in document.documentElement) clickHandler = "touchstart";
    var multiselect = document.querySelector(".multiselect"),
        select = multiselect.querySelector(".selectBox"),
        checkboxes = multiselect.querySelector("#checkboxes");
    select.addEventListener(clickHandler, function(event) {
        checkboxes.classList.toggle("show");
        checkboxes.classList.contains("show") ? window.addEventListener(clickHandler, hide) : window.removeEventListener(clickHandler,hide)
    });
    multiselect.addEventListener(clickHandler, function(event) {
        event.stopPropagation();
        creatSelected()
    });

    function hide() {
        checkboxes.classList.remove("show");
        window.removeEventListener(clickHandler, hide)
    }
    var inputs = checkboxes.getElementsByTagName("input"),
        obj = {};

    function creatSelected() {
        for (var i = 0; i < inputs.length; i++) {
            var div = obj[i];
            if (inputs[i].checked) {
                if (!div) {
                    obj[i] = div = document.createElement("div");
                    div.innerHTML = inputs[i].parentNode.textContent;
                    div.className = "educationCreate"
                }
                multiselect.appendChild(div)
            } else if (div && div.parentNode) multiselect.removeChild(div)
        }
    }
   creatSelected()
});

Comments

[Игорь]

welovepavel.esy.es/t/input

с планшета,если выбрать какой либо чекбокс то он сразу не выводится вниз сразу,тока после клика ещё раз на бокс.

и после снятия галочки ещё остаётся флажок.

думаю там дело в touchstart,или ?

с ПК таких проблем нету

[Ridz]

проверить не могу в живую, а в эмуляторе всё нормально, "и после снятия галочки ещё остаётся флажок"- эту фразу не понимаю.

[Игорь]

Ridz: images.vfl.ru/ii/1465814551/7baf3646/13006866.jpg
RE:и после снятия галочки ещё остаётся флажок"-
сорри скрин забыл добавить)

2. а как при клике на это новый див удалять его?
видимо this как то не так прописал
prntscr.com/bfsza8

[Ridz]

сорри скрин забыл добавить) -- это мне ничего не обьяснило,
видимо this как то не так прописал -- так можно удалить, но не во всех брузерах -- но в данном случае вы не учли логику уже работащего кода, клики создают дивы согласно inputs[i].checked;
клики для создания -- продумать - на label индивидуально можно -- но тогда как сохранить порядок создаваемых див.
я вам давал ссылку учебник, там есть форум, попробуйте свои вопросы задать там.

div.addEventListener(clickHandler, function(event) {
event.stopPropagation();
multiselect.removeChild(this)
});