フォーム内の複数の入力フィールドの追加/削除オプション

複数の都市名を入力するオプションを持つフォームを使用しています。フィールドを削除するボタンがあります。完璧に動作していますが、問題は以下のコードにあります。最初の都市の削除ボタンも正しくありません。フォーム内の複数の入力フィールドの追加/削除オプション

どうすれば入力ボックスの最初のセットから「削除」ボタンを削除できますか？新しく生成されたすべてのフィールドで[削除]ボタンを続行する必要があります。

私はこのウェブサイトから、このコードhttp://www.quirksmode.org/dom/domform.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Extending forms</title> 
    <script type="text/javascript" src="./Javascript - Extending forms_files/quirksmode.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    var counter = 0; 

    function init() { 
     document.getElementById('moreFields').onclick = moreFields; 
     moreFields(); 
    } 

    function moreFields() { 
     counter++; 
     var newFields = document.getElementById('readroot').cloneNode(true); 
     newFields.id = ''; 
     newFields.style.display = 'block'; 
     var newField = newFields.childNodes; 
     for (var i=0;i<newField.length;i++) { 
      var theName = newField[i].name 
      if (theName) 
       newField[i].name = theName + counter; 
     } 
     var insertHere = document.getElementById('writeroot'); 
     insertHere.parentNode.insertBefore(newFields,insertHere); 
    } 

    // --> 
    </script> 
    </head> 

    <body> 

<!--This prat will be dynamically generated on clicking the add more button (and this is the default one to be shown in the page)--> 
    <div id="readroot" style="display: none"> 
    <input type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"> 
     <label for="city">City:</label> &nbsp;&nbsp;<input type="text" class="pssng1" name="city" value="" />&nbsp;&nbsp; 
     <label for="days">Days:</label> <input type="text" class="pssng1" name="days" value="" /> 
    </div>  
<!--This prat will be dynamically generated on clicking the add more button--> 

    <form method="post" > 
    <div id="" style="display: block; "></div> 
    <span id="writeroot"></span> 
    <input type="button" id="moreFields" value="Add more!"> 
    </form> 

    </body> 
    </html>

出典

2012-03-19 Sowmya

はあなたのJavaScriptがのような変更です。

<script type="text/javascript"> 
    <!-- 
    var counter = 0; 

    function init() { 
     document.getElementById('moreFields').onclick = moreFields; 
     moreFields(); 
    } 

    function moreFields() { 
     counter++; 
     var newFields = document.getElementById('readroot').cloneNode(true); 
     newFields.id = ''; 
     newFields.style.display = 'block'; 
     var newField = newFields.childNodes; 
     for (var i=1;i<newField.length;i++) { 
      var theName = newField[i].name 
      if (theName) 
       newField[i].name = theName + counter; 
     } 
     var insertHere = document.getElementById('writeroot'); 
     insertHere.parentNode.insertBefore(newFields,insertHere); 
    } 

    // --> 
    </script>

出典

2012-03-19 10:51:53

フォーム内の複数の入力フィールドの追加/削除オプション

答えて

関連する問題