Динамическое удаление строк из таблицы HTML (JS)

Question

Ок, теперь я могу добавлять и редактировать строки в таблице. Дальше я хочу добавить механизм удаления строк из таблицы и хочу сделать это в следующий способ: что бы отредактировать строку то я кликаю по нее и в ней появляется инпут типу текст и я себе редактирую и потом по клику на будь какую часть страницы я применяю это, и я прописал условие - если этот инпут == 0, то есть если он пустой то строка по идеи должна удалятся и это не происходит, возможна я не так условие написал или инпут не понимает когда он пустой? Может кто то знает в чем дело, спасибо заранее!

  <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>

<script>
                   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 func() {
                        var input = document.createElement('input');
                        input.value = this.innerHTML;
                        this.innerHTML = '';
                        var wiersz2 = document.getElementById('tr');
                        
                        if (input == 0)
                            this.removeChild(wiersz2);
                        else
                            this.appendChild(input);

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

                        this.removeEventListener('click', func);
                        }
                </script>

Answer 1

<table class="myTable">
<tr>
    <td>First</td>
    <td contenteditable="true">Second</td>
  
  </tr>
  <tr>
    <td>111</td>
    <td contenteditable="true">222</td>
   
  </tr>
  <tr>
    
    <td>555</td>
    <td contenteditable="true">666</td>
  </tr>
  <tr>
   
    <td>888</td>
    <td contenteditable="true">999</td>
  </tr>
  <tr>
    
    <td>ццц</td>
    <td contenteditable="true">ууу</td>
  </tr>
  <tr>
    
    <td>ннн</td>
    <td contenteditable="true">ооо</td>
  </tr>
</table>

<input type="text" placeholder = "one" class='one'>
<input type="text" placeholder = "two" class='two'>
<button type = "button" class='button'>Add item</button>

let button = document.querySelector('.button');
let one = document.querySelector('.one');
let two = document.querySelector('.two');
let table = document.querySelector('.myTable');
let tds = document.getElementsByTagName("td");

table.addEventListener('DOMNodeInserted', remover);

function remover (e){

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





button.addEventListener('click', addItem);
function addItem (e) {
let firstInp = one.value;
let secondInp = two.value;
let tr = `<tr>
    <td>${firstInp}</td>
    <td contenteditable="true">${secondInp}</td>
  
  </tr>
`

table.insertAdjacentHTML('beforeend', tr)

}

БЛОГ НА HUSL

Динамическое удаление строк из таблицы HTML (JS)

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