嗨，我是 Javascript 新手(实际上我在 php mysql 上工作)。我想删除一些动态生成的行。我想将元素 id 传递给函数，然后从那里删除。但 id 是动态创建的。 下面的代码具有用于显示的行数的变量，并且每行前面的按钮、按钮的 onclick 以及该行中的两个输入元素应该被删除。
<script>
function removeMore()
{
var elem = document.getElementById();
elem.parentNode.removeChild(elem);
return false;
}
</script>
</head>
<body>
<?php
$row=5;
for($i=1; $i< $row; $i++)
{
$img_id= "img_".$i;
$cap_id= "cap_".$i;
$row_id= $i*100;
?>
<table>
<tr id="<?php echo $row_id;?>">
<td>
<input type="file" name="img[]" id="<?php echo $img_id;?>" />
</td>
<td>
<input type="text" name="cap[]" id="<?php echo $cap_id;?>" />
</td>
<td>
<input type="button" name="rem_but" id="<?php echo $i; ?>" value="<?php echo $i; ?>" onclick="removeMore(document.getElementsByName('rem_but')[0].value)" />
<!-- or may be something like this.value to get value of id. -->
</td>
</tr>
</table>
<?php
}
?>
我只想删除按钮被单击的行
HTML 看起来像这样
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function removeMore(eid){
document.write(eid);
var xd= eid*100;
var elem = document.getElementById(xd);
elem.parentNode.removeChild(elem);
return false;
}
</script>
</head>
<body>
<table>
<tr id="100"><td><input type="file" name="img[]" id="img_1" /></td><td><input type="text" name="cap[]" id="cap_1" /></td><td><input type="button" name="rem_but" id="1" value="1" onclick="removeMore(document.getElementsById(this.value)" />
</td></tr>
</table>
<table>
<tr id="200"><td><input type="file" name="img[]" id="img_2" /></td><td><input type="text" name="cap[]" id="cap_2" /></td><td><input type="button" name="rem_but" id="2" value="2" onclick="removeMore(document.getElementsById(this.value)" />
</td></tr>
</table>
<table>
<tr id="300"><td><input type="file" name="img[]" id="img_3" /></td><td><input type="text" name="cap[]" id="cap_3" /></td><td><input type="button" name="rem_but" id="3" value="3" onclick="removeMore(document.getElementsById(this.value)" />
</td></tr>
</table>
<table>
<tr id="400"><td><input type="file" name="img[]" id="img_4" /></td><td><input type="text" name="cap[]" id="cap_4" /></td><td><input type="button" name="rem_but" id="4" value="4" onclick="removeMore(document.getElementsById(this.value)" />
</td></tr>
</table>
</body>
</html>
最佳答案
<html>
<head>
<script>
// pass the ID into the method.
function removeMore(id)
{
var elem = document.getElementById(id); // getElementById requires the ID
elem.parentNode.removeChild(elem);
return false;
}
</script>
</head>
<body>
<?php
$row=5;
for($i=1; $i< $row; $i++)
{
$img_id= "img_".$i;
$cap_id= "cap_".$i;
$row_id= $i*100;
?>
<table>
<tr id="<?php echo $row_id;?>">
<td>
<input type="file" name="img[]" id="<?php echo $img_id;?>" />
</td>
<td>
<input type="text" name="cap[]" id="<?php echo $cap_id;?>" />
</td>
<td>
<input type="button" name="rem_but" id="<?php echo $i; ?>" value="<?php echo $i; ?>" onclick="removeMore(<?php echo $row_id;?>)" />
<!-- You're using PHP - just print the ID in the right place. -->
</td>
</tr>
</table>
<?php
}
?>
</body>
</html>
关于javascript - 想要删除行 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14647583/