Question

您好我有一段代码允许我添加作者。我有一个问题，我似乎无法删除表中创建的节点这是我生命中最严重的挫败感。我似乎无法删除它。我也注意到每次检查元素时我都看不到来自源的新创建元素。但是当我在萤火虫上看到它时，我实际上可以在那里看到它。

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

我对JavaScript和这个网站很新，并且通过.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，我现在无视兼容性，因为这只是我的虚拟表单中的一个示例。我稍后会处理。

EDIT 如果你需要这里的实际表格，那就是

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

非常感谢！

Answer 1

尝试此功能：

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

然后你可以这样做：

removeElements(document.querySelectorAll('#tbhold tr'));

Answer 2

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

如果更改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功能创建的。但这确实会使ctr增加到2，因此您现在正在寻找显然不存在的Author2。所以在它之前放一个ctr--;它应该可以工作。

Answer 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;
    }

这是Demo

如何在JavaScript中删除创建的元素？

3 个答案: