Удалить пустой td в таблице

У меня есть таблица и код jquery, и мне нужно: если td пусто, то удалить tr родителя td.

Как я могу это сделать?

Мой код не работает. В моем примере у меня пусто td. Я хочу удалить tr родителя. Почему мой код не работает? Что я делаю неправильно? Я ищу td для каждого td, и если td пуст, я удаляю tr родителя. Но не работает.. Не ошибки..

$('#table_serv tr').each(function(){ 
    if ( $(this).find('td').text().trim() === '' )
        $(this).find('td').parent().remove(); // if it is empty, then remove parent tr
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border = "0" class = "document-as" color = "black" id = "table_serv" style = "font-size: 12px;border-right:0" width = "100%">
    <thead>
        <tr>
            <th style = "text-align: center;color: white;font-weight: 600; width:5%"></th>
            <th style = "text-align: left;color: white;font-weight: 600;width:35%;"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Description</strong></span></span>
            </th>
            <th style = "text-align: center;color: white;font-weight: 600;width:25%;"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Selling Price</strong></span></span>
            </th>
            <th style = "text-align: center;color: white;font-weight: 600;width:15%;"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Quantity</strong></span></span>
            </th>
            <th style = "text-align: center;color: white;font-weight: 600;width:15%"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Total</strong></span></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = ""></span><span class = "de_de" style = ""></span></td>
            <td class = "serv-price" style = ""><span>0,00 €</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">9:324,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Justification safety (GOST-Norm)</span><span class = "de_de" style = "">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class = "serv-price" style = ""><span>324,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>324,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">SER20:432,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Certificate TR CU 004/020/2011 for 5 Years</span><span class = "de_de" style = "">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class = "serv-price" style = ""><span>432,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>432,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">7:34,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Declaration TR ZU 04/2011 for  5 Years</span><span class = "de_de" style = "">Deklaration TR ZU 04/2011 for 5 Jahre</span></td>
            <td class = "serv-price" style = ""><span>34,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>34,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = ""></span><span class = "de_de" style = ""></span></td>
            <td class = "serv-price" style = ""><span>0,00 €</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">9:23,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Justification safety (GOST-Norm)</span><span class = "de_de" style = "">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class = "serv-price" style = ""><span>23,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>23,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">SER20:43,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Certificate TR CU 004/020/2011 for 5 Years</span><span class = "de_de" style = "">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class = "serv-price" style = ""><span>43,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>43,00 €</strong></span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><span>Sub Total</span></td>
            <td><span>856,00 €</span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><span style = "font-family:verdana,geneva,sans-serif;">Discount</span></td>
            <td><span style = "font-family:verdana,geneva,sans-serif;">0,00 €</span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><span style = "font-family:verdana,geneva,sans-serif;">Total</span></td>
            <td><span style = "font-family:verdana,geneva,sans-serif;">856,00 €</span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><strong>&nbsp;&nbsp;&nbsp;&nbsp; Grand Total</strong></td>
            <td style = ""><span><span><strong>1343,92 €</strong></span></span>
            </td>
        </tr>
    </tbody>
</table>

где пусто td

brk 12.04.2019 09:24

но ваш TD не пуст, он содержит пустой SPAN, попробуйте поискать его...

MikNiller 12.04.2019 09:25
$(this).find('td').parent().remove(); должно быть просто $(this).remove(), когда вы повторяете tr
freedomn-m 12.04.2019 09:26

@brk, если вы запустите фрагмент, пустая td — это ячейка описания в первой строке — она заполнена HTML (spans и т. д.), но .text()== = "" для этой ячейки, поскольку html не включен в .text()

freedomn-m 12.04.2019 09:36
Поведение ключевого слова "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
4
168
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

$(document).ready(function(){
    $("tr").each(function(){
       $(this).children("td").each(function(){
           if ($(this).text() === "")
           {
              $(this).parents("tr").remove();
           }        
       });
    });
});

Код был почти хорош! Вам просто нужно было зациклить td.

$('#table_serv tr').each(function(){ 
    var tds = $(this).find('td');
    tds.each(function(){
      if ($(this).text() === ''){
       $(this).parent().remove();
      }
    });    
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border = "0" class = "document-as" color = "black" id = "table_serv" style = "font-size: 12px;border-right:0" width = "100%">
    <thead>
        <tr>
            <th style = "text-align: center;color: white;font-weight: 600; width:5%"></th>
            <th style = "text-align: left;color: white;font-weight: 600;width:35%;"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Description</strong></span></span>
            </th>
            <th style = "text-align: center;color: white;font-weight: 600;width:25%;"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Selling Price</strong></span></span>
            </th>
            <th style = "text-align: center;color: white;font-weight: 600;width:15%;"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Quantity</strong></span></span>
            </th>
            <th style = "text-align: center;color: white;font-weight: 600;width:15%"><span style = "font-family:verdana,geneva,sans-serif;"><span style = "color:#000000;"><strong>Total</strong></span></span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = ""></span><span class = "de_de" style = ""></span></td>
            <td class = "serv-price" style = ""><span>0,00 €</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">9:324,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Justification safety (GOST-Norm)</span><span class = "de_de" style = "">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class = "serv-price" style = ""><span>324,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>324,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">SER20:432,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Certificate TR CU 004/020/2011 for 5 Years</span><span class = "de_de" style = "">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class = "serv-price" style = ""><span>432,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>432,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">7:34,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Declaration TR ZU 04/2011 for  5 Years</span><span class = "de_de" style = "">Deklaration TR ZU 04/2011 for 5 Jahre</span></td>
            <td class = "serv-price" style = ""><span>34,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>34,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">:0,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = ""></span><span class = "de_de" style = ""></span></td>
            <td class = "serv-price" style = ""><span>0,00 €</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;">0,00</span></td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>0,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">9:23,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Justification safety (GOST-Norm)</span><span class = "de_de" style = "">Begründung Sicherheit (GOST-Norm)</span></td>
            <td class = "serv-price" style = ""><span>23,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>23,00 €</strong></span></td>
        </tr>
        <tr>
            <td class = "serv-nomer" style = ""><span style = "font-family:verdana,geneva,sans-serif;">SER20:43,00</span>
                <br> &nbsp;</td>
            <td style = "text-align:left;"><span class = "en_us" style = "">Certificate TR CU 004/020/2011 for 5 Years</span><span class = "de_de" style = "">Zertifikat TR CU 004/020/2011 für 5 Jahre</span></td>
            <td class = "serv-price" style = ""><span>43,00 €</span></td>
            <td style = "">1,00</td>
            <td style = ""><span style = "font-family:verdana,geneva,sans-serif;"><strong>43,00 €</strong></span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><span>Sub Total</span></td>
            <td><span>856,00 €</span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><span style = "font-family:verdana,geneva,sans-serif;">Discount</span></td>
            <td><span style = "font-family:verdana,geneva,sans-serif;">0,00 €</span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><span style = "font-family:verdana,geneva,sans-serif;">Total</span></td>
            <td><span style = "font-family:verdana,geneva,sans-serif;">856,00 €</span></td>
        </tr>
        <tr>
            <td colspan = "4" style = ""><strong>&nbsp;&nbsp;&nbsp;&nbsp; Grand Total</strong></td>
            <td style = ""><span><span><strong>1343,92 €</strong></span></span>
            </td>
        </tr>
    </tbody>
</table>
Ответ принят как подходящий

Проблема в том, что

$(this).find('td').text()

даст вам один текст для всей строки, а не для отдельных tds. Достаточно легко проверить, что он делает:

console.info($(this).find("td").text())

который даст для первой строки что-то вроде:

:0,00       0,00 €  0,00    0,00 €

похоже, вы пытаетесь найти одну пустую ячейку (а не пустую строку), поэтому вам нужно перебирать отдельные tds.

Один из способов:

$('#table_serv tr td').each(function() { 
    if ($(this).text().trim() === '')
        $(this).parent().remove(); 
});

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