【JQuery】入力したテキスト入力欄によって同階層のテキスト入力欄を制御したい

Question

JQueryにて、入力したテキスト入力欄によって同階層のテキスト入力欄を制御したいのですが、
入力したテキスト入力欄によって、同階層の以降のテキスト入力欄を空欄にする実装で相談があります。

現状の実装方法としては、入力したtextのidによって、１つずつ空欄にする処理を実装しようと思っていますがこれだと冗長なコードだと思っています。

ですので、入力欄によって同階層の以降の入力欄を空欄にする、またはリセットする関数や記述方法があれば教えていただけないでしょうか。　例えば、

• this以外のinput要素
• this以降の同階層のinput要素

などを取得して一気に操作できたらいいなと思っています。

サンプルコード（コードミスはひとまず無視でお願いします）

<table>
    <th><label for="oya">親</label><input type="text" name='oya' id=oya></th>
    <th><label for="musuko">息子</label><input type="text" name='musuko' id='musuko'></th>
    <th><label for="mago">孫</label><input type="text" name='mago' id='mago'></th>
    <th><label for="himago">ひ孫</label><input type="text" name='himago' id='himago'></th>
</table>
<script>
    var oya = $('#oya');
    var musuko = $('#musuko');
    var mago = $('#mago');
    var himago = $('#himago');

    $(function(){
    $('input').on('change', function(){
        var id = $(this).attr('id');
        
        //入力値によって以降のinputを空欄にする
        if(id = 'oya'){
            musuko.val('');
            mago.val('');
            himago.val('');
        } elseif (id = 'musuko'){
            mago.val('');
            himago.val('');
        } elseif(id ='mago'){
            himago.val('');
            
        }
    });
});
</script>

Answer 1

こうでしょうか。

			$('input').on('change', function () {
				$(this).parents('th').nextAll().children('input').val('')
			});

.nextAll() | jQuery API Documentation

Comments

[user202102]

ありがとうございます！こちらで思うような制御ができました。ベストアンサーにさせていただきます。