您好我有一段代码允许我添加作者。 我有一个问题,我似乎无法删除表中创建的节点 这是我生命中最严重的挫败感。我似乎无法删除它。 我也注意到每次检查元素时我都看不到 来自源的新创建元素。但是当我在萤火虫上看到它时,我实际上可以在那里看到它。
添加一个输入元素并将其附加到表上对我来说很好。
我对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>
非常感谢!
答案 0 :(得分:2)
尝试此功能:
function removeElements(elements) {
for (var i=0; i<elements.length; i++) {
elements[i].parentNode.removeChild(elements[i]);
}
}
然后你可以这样做:
removeElements(document.querySelectorAll('#tbhold tr'));
答案 1 :(得分: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
功能创建的。但这确实会使ctr
增加到2
,因此您现在正在寻找显然不存在的Author2
。所以在它之前放一个ctr--;
它应该可以工作。
答案 2 :(得分:1)
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