2

こんにちは、私は Javascript を初めて使用します (実際、私は php mysql で作業しています)。動的に生成された行をいくつか削除したい。要素 ID を関数に渡してから、そこから削除したいと考えています。ただし、ID は動的に作成されます。以下のコードには、表示する行数の変数があり、各行の前にあるボタン、その行の 2 つの入力要素であるボタンの 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>
4

4 に答える 4

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。, はこのボタンが入っており、はそれが入っています.elementelement.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>間に別のレベルの Dom 要素が追加されます。これは、追加のを意味します。<tr><input>.parentNode

于 2013-02-01T13:51:13.267 に答える
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 に答える
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 に答える
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 に答える