1 Тема від asdwhitefox Востаннє редагувалося leofun01 (15.05.2019 12:40:40)

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Тема: Як коректно видалити елемент з getElementsByClassName?

Вітаю.
Підкажіть будьласка, чому через getElementsByClassName при спробі видалити елемент вибиває помилку:
Uncaught ReferenceError: listLi is not defined at HTMLInputElement.buttonClick.<computed>.onclick

js code:

var buttonClick = document.getElementsByClassName('delete');
for (i = 0; i < buttonClick.length; i++) {
    buttonClick[i].onclick = function() {
        var lisrLi = document.getElementById("leftText");
        var li = lisrLi.lastElementChild;
        if(li != null) {
            listLi.removeChild(li);
        }
    }
}

HTML:

<ul id="leftText" class="textUl">
    <li class="styleLi">Text
        <div class="btnLi">
            <input type="button"class="inputbtn favorite" >
            <input type="button" class="inputbtn delete" >
        </div>
    </li>
</ul>
▼Оригінал

js code: 

var buttonClick = document.getElementsByClassName('delete');
 for (i=0; i< buttonClick.length; i++){
 buttonClick[i].onclick = function()
{
var lisrLi = document.getElementById("leftText");
var li = lisrLi.lastElementChild;
if( li != null){listLi.removeChild(li);
}
}
}

HTML:

<ul id="leftText" class="textUl">
          <li class="styleLi">Text
          <div class="btnLi">
            <input type="button"class="inputbtn favorite" >
            <input type="button" class="inputbtn delete" >
          </div></li>
        </ul>

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

тому що 

var lisrLi = document.getElementById("leftText");

lisrLi з R посередині
а тут

if( li != null){listLi.removeChild(li);

listLi з T посередині

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

3 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

Оххх, і не замітив! Дякую.
Можливо підкажете ще один ньюанс?
Якщо я клоную елемент, то в клонованих елементах створений інпут delete ніяк не реагує.
Працює тільки на першому елементі li . 


document.getElementById("addLi").onclick = function () {
var listLi = document.getElementById("leftText").lastElementChild;
var cln = listLi.cloneNode(true);
document.getElementById("leftText").appendChild(cln);
}

var buttonClick = document.getElementsByClassName('delete');
 for (i=0; i< buttonClick.length; i++){
 buttonClick[i].onclick = function()
{
var listLi = document.getElementById("leftText");
var li = listLi.lastElementChild;
if( li != null){listLi.removeChild(li);
}
}
}

4 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

asdwhitefox написав:

Оххх, і не замітив! Дякую.
Можливо підкажете ще один ньюанс?
Якщо я клоную елемент, то в клонованих елементах створений інпут delete ніяк не реагує.
Працює тільки на першому елементі li . 


document.getElementById("addLi").onclick = function () {
var listLi = document.getElementById("leftText").lastElementChild;
var cln = listLi.cloneNode(true);
document.getElementById("leftText").appendChild(cln);
}

var buttonClick = document.getElementsByClassName('delete');
 for (i=0; i< buttonClick.length; i++){
 buttonClick[i].onclick = function()
{
var listLi = document.getElementById("leftText");
var li = listLi.lastElementChild;
if( li != null){listLi.removeChild(li);
}
}
}

а html який до цього коду?

5 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 278
    • Репутація: 2720

Re: Як коректно видалити елемент з getElementsByClassName?

asdwhitefox, за відсутність відступів вам руки відірвати треба. Виправте код.

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

leofun01 вебсайт

6 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

leofun01 написав:

asdwhitefox, за відсутність відступів вам руки відірвати треба. Виправте код.

Не зовсім зрозумів про які відступи йде річ.

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

ось ці 

document.getElementById("addLi").onclick = function () {
  var listLi = document.getElementById("leftText").lastElementChild;
  var cln = listLi.cloneNode(true);
  document.getElementById("leftText").appendChild(cln);
}

var buttonClick = document.getElementsByClassName('delete');
for (i = 0; i < buttonClick.length; i++) {
  buttonClick[i].onclick = function () {
    var listLi = document.getElementById("leftText");
    var li = listLi.lastElementChild;
    if (li != null) {
      listLi.removeChild(li);
    }
  }
}

8 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

asdwhitefox написав:
leofun01 написав:

asdwhitefox, за відсутність відступів вам руки відірвати треба. Виправте код.

Не зовсім зрозумів про які відступи йде річ.

яка річ у вас йде? мова йде!

9 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

FakiNyan написав:
asdwhitefox написав:
leofun01 написав:

asdwhitefox, за відсутність відступів вам руки відірвати треба. Виправте код.

Не зовсім зрозумів про які відступи йде річ.

яка річ у вас йде? мова йде!

Словник української мови
Академічний тлумачний словник (1970—1980)
РІЧ 2, речі, жін., розм. Те саме, що мова

Дякую за пояснення. Для вирівнювання надаю перевагу плагіну beautify.
Але в момент відправки їм не скористався.

10 Відповідь від asdwhitefox Востаннє редагувалося asdwhitefox (15.05.2019 15:23:14)

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

FakiNyan написав:

ось ці 

document.getElementById("addLi").onclick = function () {
  var listLi = document.getElementById("leftText").lastElementChild;
  var cln = listLi.cloneNode(true);
  document.getElementById("leftText").appendChild(cln);
}

var buttonClick = document.getElementsByClassName('delete');
for (i = 0; i < buttonClick.length; i++) {
  buttonClick[i].onclick = function () {
    var listLi = document.getElementById("leftText");
    var li = listLi.lastElementChild;
    if (li != null) {
      listLi.removeChild(li);
    }
  }
}

Не могли б Ви мені все ж підказати, в чому моя помилка?)

11 Відповідь від FakiNyan Востаннє редагувалося FakiNyan (15.05.2019 15:26:38)

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

ви сюди на дівчат помандражирувати прийшли, чи програмізьму навчатись?
я вас раніше попросив надати html до цього коду

12 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

asdwhitefox написав:
FakiNyan написав:
asdwhitefox написав:

Не зовсім зрозумів про які відступи йде річ.

яка річ у вас йде? мова йде!

Словник української мови
Академічний тлумачний словник (1970—1980)
РІЧ 2, речі, жін., розм. Те саме, що мова

Дякую за пояснення. Для вирівнювання надаю перевагу плагіну beautify.
Але в момент відправки їм не скористався.

Неправомірним є також використання в усіх стилях, за винятком поетичного, словосполучення річ іде (з цим самим значенням).

http://slovopedia.org.ua/30/53404/25747.html

13 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

FakiNyan написав:

ви сюди на дівчат помандражирувати прийшли, чи програмізьму навчатись?
я вас раніше попросив надати html до цього коду

Охх, а головне я знову прогавив. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link rel="stylesheet" href="style.css" type="text/css">


</head>

<body>
  <div id="allProject">
    <div id="openBlock">
      <div id="leftTextBlock" class="allBlock">
        <ul id="leftText" class="textUl">
          <li class="styleLi">Text
          <div class="btnLi">
            <input type="button"class="inputbtn favorite" >
            <input type="button" class="inputbtn delete" >
          </div></li>
          <li class="styleLi">Text
          <div class="btnLi">
            <input type="button"class="inputbtn favorite" >
            <input type="button" class="inputbtn delete" >
          </div></li>
          <li class="styleLi">Text
          <div class="btnLi">
            <input type="button"class="inputbtn favorite" >
            <input type="button" class="inputbtn delete" >
          </div></li>
        </ul>

      </div>

      <div id="rightTextBlock" class="allBlock">
        <ul id="rightText" class="textUl"></ul>
      </div>

    </div>

    <div id="bottomLine">
      <input type="button" name="" id="addLi" value="Add new Li">
    </div>

  </div>

</body>
<script type="text/javascript" src="script.js">
</script>

</html>

14 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

Проблема в тому, що цикл, в котрому ви додаєте до кнопок обробники натискання, спрацьовує лише один раз, на самому початку роботи коду. Коли ви натискаєте на кнопку, щоб додати ще один елемент - на кнопку цього елемента обробник натискання не вішається.

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

15 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

FakiNyan написав:

Проблема в тому, що цикл, в котрому ви додаєте до кнопок обробники натискання, спрацьовує лише один раз, на самому початку роботи коду. Коли ви натискаєте на кнопку, щоб додати ще один елемент - на кнопку цього елемента обробник натискання не вішається.

Охх, дякую за поясненя. Можли ви тоді підкажете, якою подією, чи яким чином можливо виявити зміну в html? 
Тому що мій мозок перше що зміг придумати, це використання setInterval.  І я сам розумію що це не сама розумна ідея за сьогодні(○_○)

16 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Як коректно видалити елемент з getElementsByClassName?

Є така штука, як MutationObserver. Але краще переформулюйте питання - швидше за все, він вам не потрібен, ви щось інше намагаєтеся зробити.

koala вебсайт

17 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

koala написав:

Є така штука, як MutationObserver. Але краще переформулюйте питання - швидше за все, він вам не потрібен, ви щось інше намагаєтеся зробити.

В мене є елемент, який клонується.
І мені необхідно, щоб кнопка видалення, яка знаходиться в даному елементі була активна на всіх клонах.
Але потрібно поставити якусь умову чи метод, яка буде реагувати на зміну кількості елементів в html і перезапускати цикл.

Зараз займусь пошуком інфу по MutationObserver, подивимося що це за звір такий.

18 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як коректно видалити елемент з getElementsByClassName?

все, що вам треба, це вішати обробник натискання на щойно склоновану кнопку

Подякували: leofun01, koala2

19 Відповідь від asdwhitefox

  • asdwhitefox
  • Користувач
  • Поза форумом
  • Дата реєстрації: 21.01.2018
  • Повідомлень: 13
    • Репутація: 0

Re: Як коректно видалити елемент з getElementsByClassName?

FakiNyan написав:

все, що вам треба, це вішати обробник натискання на щойно склоновану кнопку

Геніально і просто!
Дякую!

20 Відповідь від Сергій78

  • Звідки: Рівне
  • Дата реєстрації: 04.08.2014
  • Повідомлень: 66
    • Репутація: 49

Re: Як коректно видалити елемент з getElementsByClassName?

FakiNyan написав:

Проблема в тому, що цикл, в котрому ви додаєте до кнопок обробники натискання, спрацьовує лише один раз, на самому початку роботи коду. Коли ви натискаєте на кнопку, щоб додати ще один елемент - на кнопку цього елемента обробник натискання не вішається.

asdwhitefox написав:
var buttonClick = document.getElementsByClassName('delete');
for (i = 0; i < buttonClick.length; i++) {
  buttonClick[i].onclick = function () {
    var listLi = document.getElementById("leftText");
    var li = listLi.lastElementChild;
    if (li != null) {
      listLi.removeChild(li);
    }
  }
}

Якщо я вірно зрозумів ситуацію, то можливим виходом зі становища було би застосування addEventListener()

var buttonClick = document.getElementsByClassName('delete');
for (i = 0; i < buttonClick.length; i++) {

   buttonClick[i].addEventListener('click', function() {
           var listLi = document.getElementById("leftText");
           var li = listLi.lastElementChild;
           if (li != null) {  listLi.removeChild(li);  }
     }, false);

  }

Сергій78 вебсайт