Home/ Questions/Q 9246097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:24:53+00:00

Hi I am new to Javascript (actually i work on php mysql). I want

  • 0

Hi I am new to Javascript (actually i work on php mysql). I want to remove few dynamically generated rows . I want to pass element id to function and then remove from there. But id’s are created dynamically.
Below code has variable for number of rows to show, and a button in front of each row , onclick of button the two input elements in that row, should be removed.

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

I simply want to delete the row whose button is clicked

HTML looks like this

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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>
    • 0