2

嗨，我是 Javascript 新手（实际上我在 php mysql 上工作）。我想删除一些动态生成的行。我想将元素 id 传递给函数，然后从那里删除。但是 id 是动态创建的。下面的代码具有要显示的行数的变量，并且每行前面的按钮，应删除该行中的两个输入元素的按钮。

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

4 回答 4

2 
<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>
于 2013-02-01T13:49:21.897 回答
2

您不需要传递任何 ID：

试试这个：

function removeMore(element) {
    var tr = element.parentNode.parentNode; // Get the input's parent <tr>
    tr.parentNode.removeChild(tr);          // Remove the <tr> from it's parent.
}

对于您的按钮：

<input type="button" name="rem_but" id="some_ID" value="Remove this Row" onclick="removeMore(this)" />

在removeMore中，element是按钮本身。element.parentNode, is <td>this button is in, element.parentNode.parentNodeis the <tr>it's in。

优点是您不必将id属性添加到按钮，如果您没有在其他地方使用它们。

但是，如果您更改表的结构，此代码将中断。就像现在一样，这适用于：

<table>
    <tr>
        <td>
            <input type="button" onclick="removeMore(this)" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" onclick="removeMore(this)" />
        </td>
    </tr>
</table>

例如，如果您在<div>周围添加一个，您将在和<input>之间添加另一层 Dom 元素，这意味着一个额外的。<tr><input>.parentNode

于 2013-02-01T13:51:13.267 回答
0 
<script>
function removeMore(element_id)
{
    var elem = document.getElementById(element_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= "row_".$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; ?>')" />
         </td>
    </tr>
    </table>
    <?php 
}   
?>
于 2013-02-01T13:55:58.213 回答
0

您可以使用 jQuery 简单地做到这一点：

removeMore = function(id) {
    element_id = '#' + id + '00';
    $(element_id).remove();
}

或者不传递 id：

removeMore = function(element) {
    $(element).parent().remove();
}

<input type="button" onclick="removeMore(this)" value="">
于 2013-02-01T13:57:06.367 回答