入力テキストの文字数ソート機能と入力追加、削除のトラブル

<要望＞
ユーザーが可変数の文字列に文字列を入力できるようにするJavaScriptアプリケーションを開発する
入力ウィジェット。ユーザーが文字列を入力すると、その長さが自動的に横に表示されます。
入力ウィジェット。インターフェイスを制御し、いくつかの機能を提供するためのボタンが用意されています。
•「セルの追加」ボタンをクリックすると、別の入力ウィジェットが追加されます。
•「セルの削除」ボタンをクリックすると、入力ウィジェットが削除され、常に少なくとも1つが残ります。
入力ウィジェット。
•「並べ替え」ボタンをクリックすると、表示されている文字列が並べ替えられます。
アプリケーションを3つのファイルに編成します。次の3つのファイルへのユーザーインターフェイスであるHTMLファイル
応用;ほとんどのJavaScriptコードを含むファイル。スタイリングルールを含むファイル。
1.シンプルなスタイリングの基本画面
A.目に見えるコンポーネントをほぼ中央に配置するスタイリングを提供します。また、変更します
背景のデフォルトの色。
2.セルの追加/セルの削除
A.ユーザーの便宜のために、アプリケーションは入力された文字列を記憶します。
ウィジェットが削除された後でもウィジェット。
B.ウィジェットが再度追加されると、保存された値がに表示されます。
ウィジェット。
3.入力と長さ
A.ユーザーがキーを入力するたびに、キーはそれぞれの文字列の長さをチェックして表示します
次のウィジェット（リアルタイムで）。
4.並べ替え
A.保存された文字列は、表示されていない場合、ソート操作に参加しないことに注意してください。
B.配列sort（）メソッドを使用できます。

<問題点＞
addボタンを押すとinput text が増えて、removeボタンを押すと、input textが消えるコードを書いたのですが、増えると、ボタンをまたいでしまうので、空欄テキストが増えると同時にボタンも下にずれるようにしたいのです。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Rj's Awesome JS App</title> </head>  <body style="background-color: grey">  <div id="mainDiv">  <div id="inp-wrap" style="margin: auto;border-style: solid;width: 50%;height: 50%;">  <label style="margin-left: 18%">Input</label>                              <label >Length</label>   <div id="insideDiv_0"> <p style="margin-left: 12%"><input type="text" id="inputString_0" oninput="setLength(event)">      <span id="length_0">0</span></p> </div>  <div style="margin-left: 20%;width: 50%"> <button type="button" id="add-cell" onclick="addCell()">Add Cell</button> <button type="button" id="remove-cell" onclick="removeElement()">Remove Cell</button> <button type="button" id="sort">Sort</button> </div> </div> </div> <script type="text/javascript" src="index.js"></script> </body>// a global variable to hold the current index of input element var index = 0; // a global array to hold the input strings var inputValues = []; // function to add the cell/element function addCell(){

// increment the index
index++;

// use cloneNode of javascript to make a clone
let clone = document.querySelector('#insideDiv_0').cloneNode( true );

// logic to add a new element

let id = clone.id;
let currentIndex = id.substring(id.indexOf("_")+1);

clone.id = 'insideDiv_' + index;

// check if the value of input to be added alredy exists in the global array
if(inputValues.length > index){
clone.getElementsByTagName('input')[0].value = inputValues[index];
clone.getElementsByTagName('span')[0].innerText = inputValues[index].length
}
else{
clone.getElementsByTagName('input')[0].value = '' ;
clone.getElementsByTagName('span')[0].innerText = '0'
}

// set the id as per the current index
clone.getElementsByTagName('input')[0].id = 'inputString_' + index

clone.getElementsByTagName('span')[0].id = 'length_' + index

// apend the element as child element
document.querySelector('#inp-wrap').appendChild( clone );

}

// function to set the length of inputstring
function setLength(e){

let id = e.srcElement.id;
let currentIndex = id.substring(id.indexOf("_")+1);
let inptSt = document.querySelector('#'+id).value.length;
let spanId = e.srcElement.nextElementSibling.id;
//check if it is a current index or not
if(inputValues.length > currentIndex){
inputValues[currentIndex] = document.querySelector('#'+id).value;
}
else{
inputValues.push(document.querySelector('#'+id).value);
}

let spanEl = document.getElementById(spanId);
// set the length in span element
spanEl.innerText = inptSt;

}

// function to remove the element the update the index value
function removeElement(){

let currentId = 'insideDiv_' + index ;
let inptSt = document.querySelector('#'+currentId);
inptSt.remove();
index--;
}

</html>

しかも、左側のリスト数字が表示されないので、連番で数字だけ（.なしで）表示してほしいです。

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンをまたいでしまう問題は、HTMLの閉じタグの問題です。

html
1<button type="button" id="sort">Sort</button>
2</div>
3</div>
4</div>

上記の</div>が3つ並んでいるうちの一つを消して、以下のようにしてください。

html
1</div>
2</div><!-- ここに追加 -->
3<!-- add a margin -->
4

連番を振るには、まずHTMLに表示箇所を追加します。
例えば以下のようにinputの前にspan.numberを追加するとします。

html
1<span class="number">1</span> <input type="text" id="inputString_0" oninput="setLength(event)">

そして、あとはそれに合わせてJSを変更します。

JavaScript
1clone.getElementsByTagName('span')[1].id = 'length_' + index;    // [0]となっていたのを[1]にする
2clone.querySelector('.number').innerText = index + 1;    // 追加