Динамическое удаление строк в таблице HTML

Question

В мое скрипте функция 'remover' отвечает за удаления строк в таблице, например: я нажимаю на ячейку и могу ее редактировать и если я сотру ее содержимое то она и вовсе исчезнет вместе со всей строкой, и функция работает так как я хочу но только на моих первых шести строках, то есть на тех которые были созданы при загрузки страницы по умолчанию. И я не очень понимаю как мне привязать эту функция так, что бы она влияла еще на те строки которые я создам после загрузки страницы, то есть на те динамически созданные. Может кто то сможет помочь, заранее спасибо!

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
  var wiersz = document.createElement("tr");

  var tdNumer = document.createElement("td");
  var val1 = document.getElementById("liczba").value;
  tdNumer.innerHTML = val1;
  tdNumer.addEventListener('click', func);

  var tdText = document.createElement("td");
  var val2 = document.getElementById("tekst").value;
  tdText.innerHTML = val2;
  tdText.addEventListener('click', func);

  wiersz.appendChild(tdNumer);
  wiersz.appendChild(tdText);
  var dodac = document.getElementById("tbd");
  dodac.appendChild(wiersz);
}
//--------------------------------------------

var tds = document.getElementsByTagName('td');

for (var i = 0; i < tds.length; i++) {
  tds[i].addEventListener('click', func);
}


function remover(e) {
  for (const t of tds) {
    t.addEventListener('focusout', function(e) {
      if (this.innerHTML == '') {
        this.parentNode.remove();
      }
    })
  }
}
remover();


function func() {
  var input = document.createElement('input');
  input.value = this.innerHTML;
  this.innerHTML = '';
  this.appendChild(input);

  var td = this;
  input.addEventListener('focusout', function() {
    td.innerHTML = this.value;
    td.addEventListener('click', func);
  });

  this.removeEventListener('click', func);
}

<table class="dowolnanazwa">
  <thead>
    <tr>
      <th>Numer porządkowy</th>
      <th>Nazwa epizodu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Epizod numer 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Epizod numer 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Epizod numer 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Epizod numer 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Epizod numer 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Epizod numer 6</td>
    </tr>
  </tbody>
</table>

<table class="dowolnanazwa">
  <tbody id="tbd">

  </tbody>
</table>



<p align="center">Numer: <input type="number" id="liczba"></p>
<p align="center">Nazwa: <input type="text" id="tekst"></p>
<p align="center"><button id="myBtn">Dodaj wiersz</button></p>

Answer 1

Переносим eventListener в функцию чтоб не дублировать код (addRemoveEvent)
Вызываем её когда создаются новые td эл-ты и когда в начале добавляете событие на редактирование уже существующим.

document.getElementById("myBtn").onclick = dodajWiersz;

function dodajWiersz() {
  var wiersz = document.createElement("tr");

  var tdNumer = document.createElement("td");
  var val1 = document.getElementById("liczba").value;
  tdNumer.innerHTML = val1;
  tdNumer.addEventListener('click', func);
  // тут добавляем удаление
  addRemoveEvent(tdNumer);

  var tdText = document.createElement("td");
  var val2 = document.getElementById("tekst").value;
  tdText.innerHTML = val2;
  tdText.addEventListener('click', func);
  // тут добавляем удаление
  addRemoveEvent(tdText);

  wiersz.appendChild(tdNumer);
  wiersz.appendChild(tdText);
  var dodac = document.getElementById("tbd");
  dodac.appendChild(wiersz);
}
//--------------------------------------------

var tds = document.getElementsByTagName('td');

for (var i = 0; i < tds.length; i++) {
  tds[i].addEventListener('click', func);
  // тут добавляем удаление
  addRemoveEvent(tds[i]);
}
//просто функция что вешает событие
function addRemoveEvent(el){
  el.addEventListener('focusout', function(e) {
    if (this.innerHTML == '') {
      this.parentNode.remove();
    }
  })
}


function func() {
  var input = document.createElement('input');
  input.value = this.innerHTML;
  this.innerHTML = '';
  this.appendChild(input);

  var td = this;
  input.addEventListener('focusout', function() {
    td.innerHTML = this.value;
    td.addEventListener('click', func);
  });

  this.removeEventListener('click', func);
}

<table class="dowolnanazwa">
  <thead>
    <tr>
      <th>Numer porządkowy</th>
      <th>Nazwa epizodu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Epizod numer 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Epizod numer 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Epizod numer 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Epizod numer 4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Epizod numer 5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Epizod numer 6</td>
    </tr>
  </tbody>
</table>

<table class="dowolnanazwa">
  <tbody id="tbd">

  </tbody>
</table>



<p align="center">Numer: <input type="number" id="liczba"></p>
<p align="center">Nazwa: <input type="text" id="tekst"></p>
<p align="center"><button id="myBtn">Dodaj wiersz</button></p>

БЛОГ НА HUSL

Динамическое удаление строк в таблице HTML

Ответы (1 шт):