Как удалить при помощи JS столбец «Name» в таблице?

Question

[Виолетта]

Подскажите как на JS можно удалить весь столбец "Name" ?
У меня не получается его найти через queryselector

Или сделать возможность изменять ширину столбцов, это тоже пробовала но никак не выходит (

https://jsfiddle.net/eky3audw/

<div table="" express="" class="clickable"><!----> <table infinite-scroll-throttle-delay="500" infinite-scroll-distance="420"><thead><tr><!----> <th></th> <th class=""><p class="hug"><svg no-print="" viewBox="0 0 24 24" style="width: 24px; height: 24px; opacity: 0.54; transform: rotate(0deg);"><path fill="#000000" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> <span print-only="">Статус</span> <!----></p></th><th class=""><p class="hug noselect">
              Date
              <!----></p></th><th class=""><p class="hug noselect">
              № order
              <!----></p></th><th class=""><p class="hug noselect">
              SKU
              <!----></p></th><th class=""><p class="hug noselect">
              Name
              <!----></p></th><th class=""><p class="hug noselect">
              Sell (ед.)
              <!----></p></th><th class=""><p class="hug noselect">
              Price (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              Reven (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              To cash (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              Cashed (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              Comissions (₽)
              <!----></p></th></tr></thead> <tbody><tr class=""><!----> <td id="arrow-cell-0-202" class="arrow open"><!----></td> <td id="status-cell-0-202"><span><svg no-print="" viewBox="0 0 24 24" style="width: 24px; height: 24px;"><path fill="#1e88e5" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"></path></svg> <span print-only="" style="color: rgb(30, 136, 229);">В обработке</span></span></td><td id="date-cell-0-202"><span>
        01.02.2020, 15:32
      </span></td><td id="orderId-cell-0-202"><span>
                  767527
                </span></td><td id="skuTitle-cell-0-202"><span>
        FROSTERS-КРЕМДЛЯ
      </span></td><td id="productTitle-cell-0-202"><span>
                  Крем для лица с для SOS-восстановления проблемной кожи, 170гр. Bioaqua
                </span></td><td id="amount-cell-0-202"><span>
                  2
                </span></td><td id="sellPrice-cell-0-202"><span>
        179.00
      </span></td><td id="purchasePrice-cell-0-202"><span>
        38.00
      </span></td><td id="sellerProfit-cell-0-202"><span>
        322.20
      </span></td><td id="withdrawnProfit-cell-0-202"><span>
        0.00
      </span></td><td id="commission-cell-0-202"><span>
        35.80
      </span></td></tr> <!----><tr class=""><!----> <td id="arrow-cell-1-202" class="arrow open"><!----></td> <td id="status-cell-1-202"><span><svg no-print="" viewBox="0 0 24 24" style="width: 24px; height: 24px;"><path fill="#1e88e5" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"></path></svg> <span print-only="" style="color: rgb(30, 136, 229);">В обработке</span></span></td><td id="date-cell-1-202"><span>
        01.02.2020, 12:48
      </span></td><td id="orderId-cell-1-202"><span>
                  766947
                </span></td><td id="skuTitle-cell-1-202"><span>
        FROSTERS-ТУШЬ01
      </span></td><td id="productTitle-cell-1-202"><span>
                  Тушь для ресниц QIC MASCARA
                </span></td><td id="amount-cell-1-202"><span>
                  1
                </span></td><td id="sellPrice-cell-1-202"><span>
        149.00
      </span></td><td id="purchasePrice-cell-1-202"><span>
        52.00
      </span></td><td id="sellerProfit-cell-1-202"><span>
        134.10
      </span></td><td id="withdrawnProfit-cell-1-202"><span>
        0.00
      </span></td><td id="commission-cell-1-202"><span>
        14.90
      </span></td></tr> <!----><tr class=""><!----> <td id="arrow-cell-2-202" class="arrow open"><!----></td> <td id="status-cell-2-202"><span><svg no-print="" viewBox="0 0 24 24" style="width: 24px; height: 24px;"><path fill="#1e88e5" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"></path></svg> <span print-only="" style="color: rgb(30, 136, 229);">В обработке</span></span></td><td id="date-cell-2-202"><span>
        01.02.2020, 9:16
      </span></td><td id="orderId-cell-2-202"><span>
                  766276
                </span></td><td id="skuTitle-cell-2-202"><span>
        FROSTERS-ФУТКОРР-ЗЕЛЕН-98104
      </span></td><td id="productTitle-cell-2-202"><span>
                  Футболка летняя детская с хвостиком,100% хлопок
                </span></td><td id="amount-cell-2-202"><span>
                  1
                </span></td><td id="sellPrice-cell-2-202"><span>
        299.00
      </span></td><td id="purchasePrice-cell-2-202"><span>
        183.00
      </span></td><td id="sellerProfit-cell-2-202"><span>
        269.10
      </span></td><td id="withdrawnProfit-cell-2-202"><span>
        0.00
      </span></td><td id="commission-cell-2-202"><span>
        29.90
      </span></td></tr> <!----><tr class=""><!----> <td id="arrow-cell-3-202" class="arrow open"><!----></td> <td id="status-cell-3-202"><span><svg no-print="" viewBox="0 0 24 24" style="width: 24px; height: 24px;"><path fill="#1e88e5" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"></path></svg> <span print-only="" style="color: rgb(30, 136, 229);">В обработке</span></span></td><td id="date-cell-3-202"><span>
        01.02.2020, 4:01
      </span></td><td id="orderId-cell-3-202"><span>
                  766060
                </span></td><td id="skuTitle-cell-3-202"><span>
        FROSTERS-RORECHA-БЕЛЫЙ
      </span></td><td id="productTitle-cell-3-202"><span>
                  Rorec Hand Cream  Набор кремов для рук с натуральными экстрактами, 5 шт*30 г
                </span></td><td id="amount-cell-3-202"><span>
                  4
                </span></td><td id="sellPrice-cell-3-202"><span>
        199.00
      </span></td><td id="purchasePrice-cell-3-202"><span>
        52.00
      </span></td><td id="sellerProfit-cell-3-202"><span>
        716.40
      </span></td><td id="withdrawnProfit-cell-3-202"><span>
        0.00
      </span></td><td id="commission-cell-3-202"><span>
        79.60
      </span></td></tr> <!----></tbody></table></div>

Comments

[Шохрух Шаймардонов]

У меня не получается его найти через queryselector

А вы сначала покажите как вы делаете. А то у вас в блоке js пусто.
Пока выглядит: напишите мне код...

[Marten002]

Вы же можете задать дата атрибуты, например вручную, а затем найти нужные элементы и удалить.

Задать их можно как в ручную так и с помощью js

[Виолетта]

Шохрух Шаймардонов,

var roiNumber = document.querySelectorAll('div.clickable > table > tbody > tr')
for (i=0; i<roiNumber.length;i++){

let title = document.querySelector('td[id^="productTitle"] span')
title.remove()
}

[Шохрух Шаймардонов]

Виолетта,

document.querySelector('td[id^="productTitle"] span')

Замените на

document.querySelectorAll('td[id^="productTitle"] span')[i]

[Виолетта]

Шохрух Шаймардонов, удаляет через одно значение
А как можно удалить заголовок столбца ?

[Шохрух Шаймардонов]

Виолетта, для него отдельный селектор напишите

[Виолетта]

Шохрух Шаймардонов, а почему ваш селектор удаляет через строку ?

[Шохрух Шаймардонов]

Виолетта, ну селектор не мой) я просто подправил ваш. Он выбирает все элементы и проходится по циклу. Видимо проблема в том, что после удаления счетчик сбивается. Пробуйте так:

// без никаких циклов. всего 1 строка
document.querySelectorAll('td[id^="productTitle"] span').forEach(el => el.remove());

Answer 1

[Ярослав Сербин]

$('th').each(function(i) {
  let columnName = $(this).text().trim();
  
  if (columnName === 'Name') {
    $(this).remove();
    let position = i;
    
    $('tbody tr').each(function(i) {
    	$(this).find('td:eq(' + position + ')').remove();
    });
  }
});

Comments

[Виолетта]

почему-то не отрабатывает (

[Виолетта]

Виолетта, вернее он работает только с jquery, а мне желательно без него, так как код будет использоваться в расширении для браузера, и там jquery сложно пропихнуть в стор

[Алексей Ярков]

Виолетта,

а мне желательно без него

Ну так и перепишите без него. В чем проблема?

[Виолетта]

Алексей Ярков, в том что я не знаю jquery

[Алексей Ярков]

Виолетта, рекомендую ознакомиться

[Ярослав Сербин]

Виолетта,

columns = document.querySelectorAll('th');

columns.forEach(function(column, position) {
 columnName = column.textContent.trim();
 
 if (columnName === 'Name') {
    column.remove();
    
    let rows = document.querySelectorAll('tbody tr');
    rows.forEach(function(row) {
    	row.children[position].remove();
    });
 }

});

[Ярослав Сербин]

Алексей Ярков, учить jQuery в 2020? Побойтесь бога :)

[Виолетта]

Ярослав Сербин, Спасибо за ресурс для изучения и решение задачи! Я сейчас постадийно разберу это решение, чтобы понять до конца. Я только начинаю практиковать )

[Алексей Ярков]

Ярослав Сербин, я не рекомендую прям учить, но познакомиться все же стоит )) И ссылку даже привёл, чтобы jQuery код в нативный можно было переписать.

[Виолетта]

Ярослав Сербин, куда податься кому отдаться ? )

[Ярослав Сербин]

Виолетта, всё зависит от целей и задач. В надо подучить чистый и дальше, в зависимости от задач, осваивать какие-то библиотеки. jQuery актуален, но сейчас стоит смотреть в сторону реактивности, что-то в духе Vue и ReactJS.

[Виолетта]

Ярослав Сербин, Подскажите пожалуйста последний раз )
Я попробовала внедрить этот скрипт на полный HTML
название столбца удаляет,
Но он перестал находить содержание столбца
https://jsfiddle.net/z2n3dm7b/1/

То есть я понимаю, что дело в

let rows = document.querySelectorAll('tbody tr');
    rows.forEach(function(row) {
    	row.children[position].remove();
    });

Но найти нужный селектор чтобы выделить этот столбец не могу
Еще только познаю возможности querySelectorAll