Question

您好我是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>

Answer 1

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

Answer 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是此按钮所在的<td>，而element.parentNode.parentNode是其中的<tr>。

优点是，如果你没有在其他地方使用它们，你不必将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>，则会在<tr>和<input>之间添加另一级Dom元素，意思是额外的.parentNode。

Answer 3

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

Answer 4

你可以通过使用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="">

想要删除行onclick

4 个答案: