Удаление строк в таблице HTML

Question

Я пытаюсь совместить функцию динамического удаления строк для таблицы с моим скриптом.

У меня есть функция 'remover' которая по идеи должна удалять строку в таблице когда при ее динамическом редактировании в инпуте который появляется в ячейке из функции 'func'- я ничего не напишу. И строка почему то не исчезает, может кто то знает в чем проблема и поможет мне? Спасибо заранее!

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('blur', function(e) {
      if (e.target.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('blur', 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

Замените 'blur' на 'focusout'. Событие blur у Вас срабатывает не на <td>, а на <input>'е, и не всплывает выше, поэтому обработчик на <td> его и не видит. А вот focusout в отличие от blur как раз всплывает: The main difference between this event and blur is that focusout bubbles while blur does not..

Так же, в этом случае e.target будет указывать не на <td>, а на исходный <input>. Соответственно, e.target тут надо заменить на this.

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>

БЛОГ НА HUSL

Удаление строк в таблице HTML

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