удалите td, у которого нет идентификатора, используя jquery

Question

У меня есть таблица HTML, содержащая метки и текстовые поля, в которых у немногих td есть id и несколько td не имеют идентификатора. Все остальные атрибуты схожи. У td, у которых нет идентификаторов, динамически генерируются. Структура таблицы выглядит примерно так.

<table id="myTable"> 
    <tr> 
    <td class = "myclass" id="sun">hello</td> 
    <td class = "otherclass"><input type="text" class="wonder" id = "tone" readonly = "true"><td/> 
    <td class = "myclass" id = "moon">my</td> 
    <td class = "otherclass"><input type="text" class="wonder" id = "ttwo" readonly = "true"><td/> 
    <td class = "myclass" id = "earth">name</td> 
    <td class = "otherclass"><input type="text" class="wonder" id = "tthree" readonly = "true"><td/> 
    <td class = "myclass">is</td> 
    <td class = "otherclass"><input type="text" class="wonder" readonly = "true"><td/> 
    </tr> 
    <tr> 
    <td class ="myclass">mickey</td> 
     <td class = "otherclass"><input type="text" class="wonder" readonly = "true"></td> 
    <td class ="myclass" id = "stars">mouse</td> 
    <td class = "otherclass"><input type = "text" class="wonder" id = "tfour" readonly = "true"></td> 
    </tr> 
</table> 

Нажав кнопку, я хочу удалить те, у которых нет идентификатора. Я попробовал следующее.

$('#Reset').click(function(){ 
    $('#myTable').find('tr td:not([id])').remove(); 
}); 

Но это, кажется, удаляет все тд. Я хочу удалить только те td, у которых нет атрибута id. Может кто-то, пожалуйста, помогите, как это можно сделать.

Также обратите внимание, что таблица динамична и в зависимости от количества генерируемых динамических столбцов структура таблицы изменяется каждый раз.

Answer 1

Там нет td с id, если вы хотите удалить td, которые содержат поля ввода, которые не имеют id затем использовать

$('#Reset').click(function() { 
 
    $('#myTable').find('tr td input:not([id])').parent().remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <tr> 
 
    <td class="myclass">hello</td> 
 
    <td class="otherclass"> 
 
     <input type="text" class="wonder" id="tone" readonly="true"> 
 
    </td> 
 
    <td class="myclass">my</td> 
 
    <td class="otherclass"> 
 
     <input type="text" class="wonder" id="ttwo" readonly="true"> 
 
    </td> 
 
    <td class="myclass">name</td> 
 
    <td class="otherclass"> 
 
     <input type="text" class="wonder" id="tthree" readonly="true"> 
 
    </td> 
 
    <td class="myclass">is</td> 
 
    <td class="otherclass"> 
 
     <input type="text" class="wonder" readonly="true"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="myclass">mickey</td> 
 
    <td class="otherclass"> 
 
     <input type="text" class="wonder" readonly="true"> 
 
    </td> 
 
    <td class="myclass">mouse</td> 
 
    <td class="otherclass"> 
 
     <input type="text" class="wonder" id="tfour" readonly="true"> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<button id="Reset">click 
 
</button>