5

こんにちは、著者を追加できるコードがあります。問題があります。テーブルに作成されたノードを削除できないようです。これは私の人生で最悪のフラストレーションです。削除できなかったようです。また、要素を検査するたびに、ソースから新しく作成された要素が表示されないことに気付きました。しかし、firebugで表示すると、実際にそこに表示されます。

入力要素を追加してテーブルに追加すると、うまくいきます。

私は JavaScript とこの Web に非常に慣れていないので、.createElement を介して CREATED ELEMENT を削除するのが行き詰まっています。

ここに私のコードがあります

   <script>
   var ctr = 1;

   function showTextBox() 
   {
       // is the table row I wanted to add the element before
       var target  = document.getElementById('bef');

       var tblr = document.createElement('tr');
       var tbld1 = document.createElement('td');
       var tbld2 = document.createElement('td');

       var tblin = document.createElement('input');
       tblin.name = 'Author' + ctr;
       tblin.id = 'Author' + ctr;
       tblin.placeholder = 'add another author';

       tbld1.appendChild( document.createTextNode('Author' + ctr ) );

       tbld2.appendChild( tblin );
       tblr.appendChild( tbld1 );
       tblr.appendChild( tbld2 );

       target.parentNode.insertBefore( tblr , target );
       ctr++;
   }

   function hideTextBox() 
   {
      var name    = 'Author'+ctr;
      var pTarget = document.getElementById('tbhold');
      var cTarget = document.getElementById( name ); 
      alert( cTarget ); // this one return null? Why? I have created id="Author1"
                        // viewing this code on source make the created elem to not appear
   }                
   </script>

私は何か間違ったことをしていますか？本当に助けが必要です。これは学校での私のプロジェクト用です。削除する方法はありますか。そのノードを作成しましたが、何かをクリックすると削除されます。

また、私は JQuery やその他の JStuff ではなく JS を使用することを好みます。これは私のダミー フォームの単なるサンプルであるため、現時点では互換性を無視しています。それについては後で扱います。

編集実際のフォームが必要な場合は、ここにあります

    <form enctype="multipart/form-data" action="process/" method="POST" />
    <h3>Book Upload</h3>

    <table border="2" id='tbhold'>
    <tr>
        <td>Title</td>
        <td><input type="text" id="book_title" name="book_title" /></td>
    </tr>

    <tr>
        <td>Author</td>
        <td><input type="text" id="book_author" name="book_author" /></td>
    </tr>

    <tr id="bef">
      <td colspan="2">
        <a href="javascript:showTextBox()">add author</a> 
        <a href="javascript:hideTextBox()">remove</a>
      </td>                     
  </tr>
  </table>
  </form>

どうもありがとうございました！

4

3 に答える 3

4

この機能を試してください：

function removeElements(elements){
    for(var i = 0; i < elements.length; i++){
        elements[i].parentNode.removeChild(elements[i]);
    }
}

次に、これを行うことができます：

removeElements(document.querySelectorAll('#tbhold tr'));
于 2013-05-23T07:16:34.750 に答える