jquery removeAttrがエラーは出ないが適用されない

Question

セレクトボックスの値を変えたときにその行の他の値をクリアするために
__カスタムデータ属性__をremoveAttrを使って消したいのですがうまくいきません。
どうすればうまくいくでしょうか？
また、選択した行にはcs-serectedというclassがついてその行の項目をクリアします。

どうか、力をお貸しください。

<table class="table table-bordered">
 <thead id="th">
   <tr>
       <th class="list0-col1 cs-center">a</th>
       <th class="list0-col2 cs-center">b</th>
       <th class="list0-col3 cs-center">c</th>
       <th class="list0-col4 cs-center">d</th>
       <th class="list0-col5 cs-center">e</th>
       <th class="list0-col6 cs-center">f</th>
       <th class="list0-col7 cs-center">g</th>
    </tr>
   </thead>
  <tbody id="tb">
<form>
    <td class="list0-col1" data-td="">
      <select class="form-control input-sm" id="name" name="name">
        <option value=""></option>
        <% for(var j=0; j < a.length; j++){ %>
        <option value="<%- a[j] %>" data-id="<%- j %>"><%- a[j] %></option>
        <% } %></select>
    </td>
  </form>
  <form>
    <td class="list0-col2" data-td="">
      <select class="form-control input-sm" id="num"  name="num">
      <% for(var l=0; l < b.length; l++){ %>
      <option value="<%- b[l] %>" data-id="<%- l %>"><%- b[l] %></option>
      <% } %></select>
    </td>
  </form>
    <td class="list0-col3" data-td=""><input type="text" id="hm" class="hm cs-real cs-right"></td>
  <form>
    <td class="list0-col4" data-td="">
      <select class="form-control input-sm" id="unit" name="unit">
        <option value=""></option>
        <% for(var k=0; k < c.length; k++){ %>
        <option value="<%- c[k] %>" data-id="<%- k %>"><%- c[k] %></option>
        <% } %></select>
    </td>
  </form>
    <td class="list0-col5" data-td="">
      <input type="text" class="size1 cs-int">×
      <input type="text" class="size2 cs-int">
      <input type="text" class="kazu cs-int">個
    </td>
    <td class="list0-col6" data-td=""><input type="checkbox" id="supc" name="sup"></td>
    <td class="list0-col7" data-td=""><input type="text" class="note" id="note"></td>
    <td><input type="button" class="del" value="削除"></td>
  </tbody>
</table>

$(document).on('change','#name',function(){
 $(".cs-serected").children(".list0-col2").removeAttr("data-td");
 $(".cs-serected").children(".list0-col3").removeAttr("data-td");
 $(".cs-serected").children(".list0-col4").removeAttr("data-td");
 $(".cs-serected").children(".list0-col5").removeAttr("data-td");
 $(".cs-serected").children(".list0-col6").removeAttr("data-td");
 $(".cs-serected").children(".list0-col7").removeAttr("data-td");
})

追記：ご丁寧な回答ありがとうございます。
クラス名を指定する時の.は質問する際に書き忘れてしまいました。
大変失礼しました。

Comments

[chocodoughnut]

html側にcs-serectedが見当たらないですが、投稿時に手違いで消えてないでしょうか？

[退会済みユーザー]

デフォルトではcs-serectedはついていません。質問文にもありますようにある行をクリックしたときにその行にcs-serectedをつける仕様になっています

Answer 1

とりあえずこのように書き直してみてください。

$('.cs-serected').children('.list0-col2').removeAttr("data-td");
// 他も同じように

Answer 2

クラス名の指定をするのでしたらクラス名の前に「.」が必要ですね。

 $('.cs-serected').children(".list0-col2").removeAttr("data-td");