フォームの項目を追加・削除できるようにした後、一番上の項目は削除できないようにしたい

Question

実現したいこと

フォームの項目をjqueryで追加・削除できるよう実装したが、
一番最初の項目は削除できない様にしたい。

前提

jqueryでフォームの項目を、ボタンのクリックで追加・削除できるように実装しました。
削除の際に、一番上の項目まで、削除できてしまうので、一番上のbuttonにはdisabledをつけたい。

該当のソースコード

<div class="item column">
	<label class="label">果物</label>
	<div class="s-box" data-formno="0" id="s-box">
		<select class="fruits" id="" name="fruits[0]">
			<option value="">選択してください</option>
			<option value="apple">りんご</option>
			<option value="banana">バナナ</option>
			<option value="grape">ぶどう</option>
		</select>
		<button class="remove-btn" type="button">削除</button>
	</div>
	<button class="add-btn" type="button">追加する</button>
</div>

$(function() {
	//追加
	$('.add-btn').click(function() {
		//クローンを変数に格納
		var clonecode = $('.s-box:last').clone(true);

		//数字を＋１し変数に格納
		var cloneno = clonecode.attr('data-formno');
		var cloneno2 = parseInt(cloneno) + 1;
		var cloneno3 = parseInt(cloneno) + 2;

		//data属性の数字を＋１
		clonecode.attr('data-formno',cloneno2);

		//name属性の数字を+1
		var namecode = clonecode.find('select.fruits').attr('name');
		namecode = namecode.replace(/fruits\[[0-9]{1,2}/g,'fruits[' + cloneno2);
		clonecode.find('select.fruits').attr('name',namecode);

		//HTMLに追加
		clonecode.insertAfter($('.s-box:last'));


	});


	//削除
	$('.remove-btn').click(function() {
		//クリックされた削除ボタンの親要素を削除
		$(this).parents(".s-box").remove();

		var scount = 0;

		//番号振り直し
		$('.s-box').each(function(){
			var scount2 = scount + 1;

			//data属性の数字
			$(this).attr('data-formno',scount);

			//select質問タイトル番号振り直し
			var name = $('select.fruits',this).attr('name');
			name = name.replace(/fruits\[[0-9]{1,2}/g,'fruits[' + scount);
			$('select.fruits',this).attr('name',name);

			scount += 1;
		});

	});
});

試したこと

フォームはこちらの記事を参考に作成しました。
https://4ndan.com/blog/form/

Comments

[yambejp]

一番上を削除できなくするのではなく、最後の１個を削除できなくすべきでしょうね

Answer 1

こんなかんじでしょうか？

<script>
const click_func=()=>{
  document.querySelectorAll('.remove-btn').forEach((x,_,y)=>{
    x.disabled=y.length<2;
  })
  document.querySelectorAll('[data-formno]').forEach((x,y)=>{
    x.dataset.formno=y;
    x.querySelector('.fruits').setAttribute('name',`fruits[${y}]`);
  })
}
document.addEventListener('click',({target})=>{
  if(target.matches('.add-btn')){
    const sbox=document.querySelector('.s-box');
    sbox.after(sbox.cloneNode(true));
    click_func();
  }
  if(target.matches('.remove-btn')){
    target.closest('.s-box').remove();
    click_func();
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
  click_func();
});
</script>
<div class="item column">
<label class="label">果物</label>
<div class="s-box" data-formno="0">
<select class="fruits" name="fruits[0]">
<option value="">選択してください</option>
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="grape">ぶどう</option>
</select>
<button class="remove-btn" type="button">削除</button>
</div>
<button class="add-btn" type="button">追加する</button>
</div>

Answer 2

一番上のbuttonにはdisabledをつけたい。

HTMLのコード上では disabled 属性を付けておいて、複製するコードで複製の disabled を消すといいでしょう。