Как удалить дочерние элементы с одинаковым классом в каждом родительском элементе?

Question

[Юпитер Макс]

Есть такая разметка

<table>
    <tbody>
        <tr>
            <td class="class_1"></td>
            <td class="class_2"></td>
            <td class="class_3"></td>
            <td class="class_1"></td>
            <td class="class_2"></td>
        </tr>
        <tr>
            <td class="class_1"></td>
            <td class="class_2"></td>
            <td class="class_3"></td>
            <td class="class_1"></td>
            <td class="class_2"></td>
        </tr>
   </tbody>
</table>

Что-то не могу сообразить, как добраться до td в каждой tr и удалить td с одинаковыми классами.

Comments

[Сергей Сергей]

для испытаний

$('tr').each( function() {
  const uc = [];
  $( 'td', this ).each( function() {
    let cn = this.className;
    if( uc.includes( cn ) ) $( this ).detach();
    else uc.push( cn );
  } );
} );

[Юпитер Макс]

Сергей Сергей, спасибо. Напишите в ответ, отмечу решением))

Answer 1

[stepa90]

Просто переберите элементы и посчитайте число элементов с таким классом

$('tr td').each((i,e)=>{
let elementsWithClass = $('td.'+$(e).attr('class'),$(e).parent());
if(elementsWithClass.length>1) {
    elementsWithClass.remove()
}
})

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

$('tr td').each((i,e)=>{
let elementsWithClass = $('td.'+$(e).attr('class')+':not(:first)',$(e).parent());
if(elementsWithClass.length>0) {
    elementsWithClass.remove()
}
})

Comments

[Юпитер Макс]

я так делал, но забыл уточнить, что количество TD может быть меньше чем в первой строке. Вот тут-то все и ломается. То есть если разметка такая, то уже не работает. А вот почему, не пойму.

<table>
    <tbody>
        <tr>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
            <td class="class_3">3</td>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
        </tr>
        <tr>
            <td class="class_2">2</td>
            <td class="class_3">3</td>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
        </tr>
   </tbody>
</table>

[stepa90]

Юпитер Макс, не пойму что именно ломается. не имеет значения сколько элементов td в tr
То что вы описали после ввода этого кода

$('tr td').each((i,e)=>{
let elementsWithClass = $('td.'+$(e).attr('class')+':not(:first)',$(e).parent());
if(elementsWithClass.length>0) {
    elementsWithClass.remove()
}
})

Вышел такой результат

<table>
    <tbody>
        <tr>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
            <td class="class_3">3</td>
            
            
        </tr>
        <tr>
            <td class="class_2">2</td>
            <td class="class_3">3</td>
            <td class="class_1">1</td>
            
        </tr>
   </tbody>
</table>

Повторов нет. Если результат не тот, то какой результат должен быть?

[Юпитер Макс]

stepa90, да, все правильно. Работает. Сразу не заметил у себя, что если разметка такая, то удаляются все элементы. Тут возможно не так я задал вопрос. Нужно удалить элементы у которых дублируется класс))

<table>
    <tbody>
        <tr>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
        </tr>
        <tr>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
            <td class="class_3">3</td>
            <td class="class_3">3</td>
        </tr>
   </tbody>
</table>

[stepa90]

Юпитер Макс, мы ходим по кругу)) можете привести пример начальной таблицы и что из неё должно получится?)

[Юпитер Макс]

stepa90, ))) ну смотрите. Когда в строке есть элементы с повторяющимися классами.

<tr>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
        </tr>

нужно удалить дубли и должно получиться так

<tr>
            <td class="class_1">1</td>
            <td class="class_2">2</td>
        </tr>

[stepa90]

Юпитер Макс, это код делает именно то что вы хотите

$('tr td').each((i,e)=>{
let elementsWithClass = $('td.'+$(e).attr('class')+':not(:first)',$(e).parent());
if(elementsWithClass.length>0) {
    elementsWithClass.remove()
}
})

Убедитесь в этом тут

[Юпитер Макс]

stepa90, да, теперь правильно, как то я не сообразил про first )))