画像にIDを動的に割り当てる方法

Question

var intFields = 0; 
var maxFields = 10; 
function addElement() { 
    "use strict"; 
    var i, intVal, contentID, newTBDiv, message = null; 
    intVal = document.getElementById('add').value; 
    contentID = document.getElementById('content'); 
    message = document.getElementById('message'); 
    if (intFields !== 0) { 
     for (i = 1; i <= intFields; i++) { 
      contentID.removeChild(document.getElementById('strText' + i)); 
     } 
     intFields = 0; 
    } 
    if (intVal <= maxFields) { 
     for (i = 1; i <= intVal; i++) { 
      intFields = i; 
      newTBDiv = document.createElement('div'); 
      newTBDiv.setAttribute('id', 'strText' + intFields); 
      newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>"; 
      contentID.appendChild(newTBDiv); 
      message.innerHTML = "Successfully added " + intFields + " fields."; 
     } 
    } else { 
     for (i = 1; i <= maxFields; i++) { 
      intFields = i; 
      newTBDiv = document.createElement('div'); 
      newTBDiv.setAttribute('id', 'strText' + intFields); 
      newTBDiv.innerHTML = "<input placeholder='recipient" + intFields + "@email.com' type='text' name='" + intFields + "'/><a href='javascript:removeElement();'><img id='strImg + " + intFields + "' src='images/minus.png' alt='Add A Field'/></a><input type='text' value='" + newTBDiv.id + "'/>"; 
      contentID.appendChild(newTBDiv); 
      message.innerHTML = "Unable to create more than 10 receipient fields!"; 
     } 
    } 
} 

ここでは、ユーザーが電子メールアドレスを入力できるテキストフィールドを10個まで動的に追加し、テキストボックスの右側にマイナス記号の画像を追加します別のスクリプトを呼び出します。マイナス記号を割り当てて追跡する方法を調べることができません。私はマイナス記号のスクリプトがそれがあるテキストボックスを認識してそれを削除するようにする必要があります。削除スクリプトを簡単に書くことはできますが、削除するテキストボックスをイメージに伝える方法が不明です。どんな助言、提案、またはコメントも大歓迎です。

おかげで、 ニック・S.

Answer 1

マイナスと呼ばれるフィールドにクラスを追加し、そのようにチェックすることができます。私はこれにjqueryを使用することをお勧めします。そのクラスで

$("body input").each(function (i) { 
    if($(this).attr("class") == "minus"){ 
     $(this).remove(); 
    } 
}); 

をすべての要素を削除するには、クラス

$("#element").addClass("minus"); 

を追加するには

Answer 2

2つの最良の選択肢は、芋、1）DOMトラバーサルこと、または2）IDフラグメントを操作します。

最初の方法では、イベントが発生している要素への参照（マイナス記号）を渡し、そこからDOMをナビゲートして適切なテキストボックスを取得します（jQueryでは$(this).prev()を使用できます）。例）。

第2の方法では、トリガー要素のID（マイナス記号）に接頭辞または接尾辞を、ターゲット要素（テキストボックス）に同じ接頭辞または接尾辞を割り当てます。トリガー要素からのIDの単純な文字列操作によって、ターゲット要素の適切なIDを生成できます（再度）。

これで十分ですか？

Answer 3

フィールドにクラスを追加し、マイナス記号と同じクラスを追加してみてください。

ので

newTBDiv.setAttribute('class', 'field' + intFields); 

、setAttributeメソッドIDの後にこの権利を追加し、ちょうどそのクラスを持つすべての要素を削除します。