0

Впервые столкнулся с 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>

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

2
  • Я б каждой строке присваивал свой id и потом удалял по нему. 14 авг 2018 в 7:19
  • Id - это у каждого элемента должен быть уникальный у элемента не может быть двух id и не может быть у двух или более элементов одно и тоже id
    – Air
    14 авг 2018 в 7:30

2 ответа 2

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>

0

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.