Как удалить строку из таблицы

Код ниже удаляет строку, если она содержит пустую ячейку в 3-м столбце. Он использует метод jquery fadeOut для получения приятного эффекта. Дело в том, что я не могу заставить код работать без метода faeOut.

Я попробовал $(this).remove();, но это не сработало.

function TT(){
  var A = 3;
  $('table tbody tr td:nth-child(' + A + ')').each(function(index){
    var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text();
    if (cellValue.length === 0){
      $(this).parents('tr').fadeOut(function(){
        $(this).remove(); 
      });
    }
  });
}
table {
    margin: 10px;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
    <td>E1</td>
    <td>F1</td>
    <td>G1</td>
    <td>H1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td></td>
    <td>E2</td>
    <td>F2</td>
    <td>G2</td>
    <td>H2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
    <td>D3</td>
    <td>E3</td>
    <td>F3</td>
    <td>G3</td>
    <td>H3</td>
  </tr>
  <tr>
    <td>A4</td>
    <td>B4</td>
    <td>C4</td>
    <td>D4</td>
    <td>E4</td>
    <td>F4</td>
    <td>G4</td>
    <td>H4</td>
  </tr>
  <tr>
    <td>A5</td>
    <td>B5</td>
    <td>C5</td>
    <td></td>
    <td>E5</td>
    <td>F5</td>
    <td>G5</td>
    <td>H5</td>
  </tr>
  <tr>
    <td>A6</td>
    <td>B6</td>
    <td>C6</td>
    <td></td>
    <td>E6</td>
    <td>F6</td>
    <td>G6</td>
    <td>H6</td>
  </tr>
    <tr>
    <td>A7</td>
    <td>B7</td>
    <td>C7</td>
    <td>D7</td>
    <td>E7</td>
    <td>F7</td>
    <td>G7</td>
    <td>H7</td>
  </tr>
    <tr>
    <td>A8</td>
    <td>B8</td>
    <td>C8</td>
    <td></td>
    <td>E8</td>
    <td>F8</td>
    <td>G8</td>
    <td>H8</td>
  </tr>
    <tr>
    <td>A9</td>
    <td>B9</td>
    <td>C9</td>
    <td>D9</td>
    <td>E9</td>
    <td>F9</td>
    <td>G9</td>
    <td>H9</td>
  </tr>
    <tr>
    <td>A10</td>
    <td>B10</td>
    <td>C10</td>
    <td>D10</td>
    <td>E10</td>
    <td>F10</td>
    <td>G10</td>
    <td>H10</td>
  </tr>
    <tr>
    <td>A11</td>
    <td>B11</td>
    <td>C11</td>
    <td>D11</td>
    <td>E11</td>
    <td>F11</td>
    <td>G11</td>
    <td>H11</td>
  </tr>
</table>
</br>
 <button type = "button" onclick = "TT()">Click Me!</button>

Вы говорите о строке, а не о столбце, поэтому я отредактировал заголовок вопроса.

— SaidbakR 30.03.2018 00:53
javascript jquery
30.03.2018 00:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Несколько раз вы запрашиваете «table». Что не требуется. Достаточно только первого цикла для перебора всех элементов 3-го столбца, чтобы узнать, пуста ли ячейка, и удалить всю строку.

function TT(){
		var A = 4;
		$('table tbody tr td:nth-child(' + A + ')')
    .each(function(index){
    if ($(this).text()= = "" )  {$(this).parent().remove();}
		});
	}
table {
    margin: 10px;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
    <td>E1</td>
    <td>F1</td>
    <td>G1</td>
    <td>H1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td></td>
    <td>E2</td>
    <td>F2</td>
    <td>G2</td>
    <td>H2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
    <td>D3</td>
    <td>E3</td>
    <td>F3</td>
    <td>G3</td>
    <td>H3</td>
  </tr>
  <tr>
    <td>A4</td>
    <td>B4</td>
    <td>C4</td>
    <td>D4</td>
    <td>E4</td>
    <td>F4</td>
    <td>G4</td>
    <td>H4</td>
  </tr>
  <tr>
    <td>A5</td>
    <td>B5</td>
    <td>C5</td>
    <td>D5</td>
    <td>E5</td>
    <td>F5</td>
    <td>G5</td>
    <td>H5</td>
  </tr>
  <tr>
    <td>A6</td>
    <td>B6</td>
    <td>C6</td>
    <td>D6</td>
    <td>E6</td>
    <td>F6</td>
    <td>G6</td>
    <td>H6</td>
  </tr>
 


</table>
</br>
 <button type = "button" onclick = "TT()">Click Me!</button>
30.03.2018 01:06

Нет необходимости использовать .each(), вы можете просто использовать .filter()

function TT(){
  var A = 3;
  $('table tbody tr').filter(function(){
    return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces
  }).remove();
}
table {
    margin: 10px;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 95%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tr>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
    <td>E1</td>
    <td>F1</td>
    <td>G1</td>
    <td>H1</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td></td>
    <td>E2</td>
    <td>F2</td>
    <td>G2</td>
    <td>H2</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>B3</td>
    <td>C3</td>
    <td>D3</td>
    <td>E3</td>
    <td>F3</td>
    <td>G3</td>
    <td>H3</td>
  </tr>
  <tr>
    <td>A4</td>
    <td>B4</td>
    <td>C4</td>
    <td>D4</td>
    <td>E4</td>
    <td>F4</td>
    <td>G4</td>
    <td>H4</td>
  </tr>
  <tr>
    <td>A5</td>
    <td>B5</td>
    <td>C5</td>
    <td></td>
    <td>E5</td>
    <td>F5</td>
    <td>G5</td>
    <td>H5</td>
  </tr>
  <tr>
    <td>A6</td>
    <td>B6</td>
    <td>C6</td>
    <td></td>
    <td>E6</td>
    <td>F6</td>
    <td>G6</td>
    <td>H6</td>
  </tr>
    <tr>
    <td>A7</td>
    <td>B7</td>
    <td>C7</td>
    <td>D7</td>
    <td>E7</td>
    <td>F7</td>
    <td>G7</td>
    <td>H7</td>
  </tr>
    <tr>
    <td>A8</td>
    <td>B8</td>
    <td>C8</td>
    <td></td>
    <td>E8</td>
    <td>F8</td>
    <td>G8</td>
    <td>H8</td>
  </tr>
    <tr>
    <td>A9</td>
    <td>B9</td>
    <td>C9</td>
    <td>D9</td>
    <td>E9</td>
    <td>F9</td>
    <td>G9</td>
    <td>H9</td>
  </tr>
    <tr>
    <td>A10</td>
    <td>B10</td>
    <td>C10</td>
    <td>D10</td>
    <td>E10</td>
    <td>F10</td>
    <td>G10</td>
    <td>H10</td>
  </tr>
    <tr>
    <td>A11</td>
    <td>B11</td>
    <td>C11</td>
    <td>D11</td>
    <td>E11</td>
    <td>F11</td>
    <td>G11</td>
    <td>H11</td>
  </tr>
</table>
</br>
 <button type = "button" onclick = "TT()">Click Me!</button>

Note:parent() , parents() , closest() all of those should work if you start from <td> .. but for me a simple thing is to start from the <tr> not from the <td>

Другое примечание: Индекс :nth-child(index) начинается с 1 .. а :eq(index) начинается с 0

Спасибо за ответ. Однако мне нужно, чтобы он работал без метода fadeOut,

— MK01111000 30.03.2018 11:37

добро пожаловать @ MK01111000 .. вы можете удалить fadeOut() .. Я обновил свой ответ, чтобы вы знали, как это делается ..

— Mohamed-Yousef 30.03.2018 21:33
30.03.2018 01:15

Другие вопросы по теме

Отсортировать строку с разделителями по полю json
Помещать значения в пустой массив?
Добавить много классов в стиль в jquery
Скопируйте стили состояния: hover, чтобы дизайн был таким же, без действительно зависающих элементов
Прокрутите элементы и установите заголовок Gigya share
Рассчитать возраст без отправки
Возьмите и сравните настраиваемый список из div внутри div
Как получить информацию из API с помощью jquery?
Ошибка WebStorm ReferenceError: $ не определено
Формат операторов jQuery отличается от обычного

Похожие вопросы

Условный встроенный стиль с помощью React Native
Создание следующих страниц через javascript без обновления или новой страницы?
JQueryUI Автозаполнение раскрывающегося списка отсутствует форматирование
Изображения не отображаются в шаблоне веб-пакета Vue-cli
Удалить элемент HTML по истечении установленного времени
Стрелка d3 график svg не отображается
Помещать значения в пустой массив?
Добавить много классов в стиль в jquery
В React, как установить флажок ввода в зависимости от значения объекта
Добавление выпадающего меню сгенерированного csv в amcharts