Удаление строк из html таблицы с помоью javascript

197

31 октября 2018, 08:00

Впервые столкнулся с js, и передо мной стоит задача: имеется таблица, в которой один столбец - форма с текстовыми полями, нужно по нажатию кнопки удалить все строки таблицы, в которых поля формы не заполнены.

function deleteRows() { 
  var flag = true; 
  while (flag) { 
    flag = false; 
    if (document.getElementById('count').value == "") { 
      ell = checkboxElement.closest("tr"); 
      ell.parentElement.removeChild(ell); 
      flag = true; 
    } 
  } 
 
}

<div class="container"> 
  <form> 
    <div class="form-group"> 
      <table class="table table-bordered"> 
        <thead> 
          <tr> 
            <th scope="col">Название</th> 
            <th scope="col">Фото</th> 
            <th scope="col">Описание</th> 
            <th scope="col">Количество</th> 
          </tr> 
        </thead> 
        <tbody> 
          <tr> 
            <th scope="row">Планшеты</th> 
            <td><img src="img/inv/planshet.jpg" width="320" height="180"></td> 
            <td>Планшеты можно взять на складе</td> 
            <td><input class="form-control" type="text" id="count" placeholder="Всего 6"></td> 
          </tr> 
          <tr> 
            <th scope="row">Подушка</th> 
            <td><img src="img/inv/podushka.jpg" width="320" height="180"></td> 
            <td>Подушку можно взять на складе</td> 
            <td><input class="form-control" type="text" id="count" placeholder="Всего 2"></td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
    <button onclick="deleteRows()" class="btn btn-dark">Далее</button> 
  </form> 
</div>

Вопросы: как исправить код, потому что он нерабочий, и нормальный ли это вариант решения, или же можно реализовать такой механизм как-то иначе?

Answer 1

id должны быть уникальными для страницы, воспользуйтесь классом:

function deleteRows() { 
  document.querySelectorAll('.count').forEach(item => { 
    if (item.value == "") item.closest("tr").remove() 
  }) 
}

<div class="container"> 
  <!-- <form> --> 
  <div class="form-group"> 
    <table class="table table-bordered"> 
      <thead> 
        <tr> 
          <th scope="col">Название</th> 
          <th scope="col">Фото</th> 
          <th scope="col">Описание</th> 
          <th scope="col">Количество</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <th scope="row">Планшеты</th> 
          <td><img src="img/inv/planshet.jpg" width="20" height="10"></td> 
          <td>Планшеты можно взять на складе</td> 
          <td><input class="form-control count" type="text" placeholder="Всего 6"></td> 
        </tr> 
        <tr> 
          <th scope="row">Подушка</th> 
          <td><img src="img/inv/podushka.jpg" width="20" height="10"></td> 
          <td>Подушку можно взять на складе</td> 
          <td><input class="form-control count" type="text" placeholder="Всего 2"></td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <button onclick="deleteRows()" class="btn btn-dark">Далее</button> 
  <!-- </form> --> 
</div>

Answer 2

type="button" - для наглядности, что бы форма не закрывалась, удали ее

var count = document.getElementsByClassName('form-control'); 
var btn = document.getElementById('btn'); 
btn.addEventListener('click', function() { 
  for (let i = 0; i < count.length; i++) { 
    if (count[i].value === '') { 
      count[i].parentElement.parentElement.remove(); 
    } 
  } 
})

<div class="container"> 
  <form> 
    <div class="form-group"> 
      <table class="table table-bordered"> 
        <thead> 
          <tr> 
            <th scope="col">Название</th> 
            <th scope="col">Фото</th> 
            <th scope="col">Описание</th> 
            <th scope="col">Количество</th> 
          </tr> 
        </thead> 
        <tbody> 
          <tr> 
            <th scope="row">Планшеты</th> 
            <td><img src="img/inv/planshet.jpg" width="320" height="180"></td> 
            <td>Планшеты можно взять на складе</td> 
            <td><input class="form-control" type="text" id="count" placeholder="Всего 6"></td> 
          </tr> 
          <tr> 
            <th scope="row">Подушка</th> 
            <td><img src="img/inv/podushka.jpg" width="320" height="180"></td> 
            <td>Подушку можно взять на складе</td> 
            <td><input class="form-control" type="text" id="count" placeholder="Всего 2"></td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
    <button id="btn" type="button" class="btn btn-dark">Далее</button> 
  </form> 
</div>