5

您好，我有一段代码可以让我添加作者。我有一个问题，我似乎无法删除表中创建的节点这是我一生中最糟糕的挫折。我似乎无法删除它。我还注意到，每次检查元素时，我都无法从源代码中看到新创建的元素。但是当我在萤火虫上查看它时，我实际上可以在那里看到它。

添加输入元素并将其附加到表上对我来说很好。

我对 JavaScript 和这个 web 事物还很陌生，通过 .createElement 删除创建的元素是我坚持的地方。

这是我的代码

   <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>

难道我做错了什么？我真的需要帮助。这是我在学校的项目。有什么办法可以删除。我创建了该节点，并希望在单击某些内容时将其删除。

此外，我更喜欢使用 JS 而不是使用 JQuery 或其他 JStuff，我现在不考虑兼容性，因为这只是我的虚拟形式中的一个示例。我稍后会处理。

编辑如果您需要这里的实际表格，它是

    <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 回答
3 
function hideTextBox(){
    var name = "Author" + (ctr - 1);
    var pTarget = document.getElementById('tbhold');
    var cTarget = document.getElementById(name);
    var tr = cTarget.parentNode.parentNode;

    tr.parentNode.removeChild(tr);
    ctr = ctr - 1;
}

这是一个演示

于 2013-05-23T07:53:15.743 回答
1

每次我检查元素时，我都无法从源代码中看到新创建的元素。但是当我在萤火虫上查看它时，我实际上可以在那里看到它。

如果您更改 DOM，您当然不会更改 HTML 源标记。只有 DOM 检查器会向您显示更改。

var name    = 'Author'+ctr;
var cTarget = document.getElementById( name );
alert( cTarget ); // this one return null? Why? I have created id="Author1"

是的，您使用您的showTextBox函数创建了它。但这确实也增加了ctrto 2，因此您现在正在寻找Author2显然不存在的。所以ctr--;在它前面加上一个，它应该可以工作。

于 2013-05-23T07:22:56.083 回答