删除生成的字段 javascript答案

【问题标题】：Remove generated fields javascript删除生成的字段 javascript
【发布时间】：2014-09-08 09:44:00
【问题描述】：

我在使用 js 函数删除字段时遇到问题。首先，我生成这个和数据库表中的条目一样多：

function queryComposant($param) {
    $query = "SELECT nom_" . $param . " FROM " . $param . ";";
    $result = connectdb()->query($query)or die("Err " . $query);
    $resultat = $result->fetch(PDO::FETCH_OBJ);
    echo '<table border = "1" id="table' . $param . '">';

    foreach ($resultat as $value) {

    }

    while ($resultat = $result->fetch(PDO::FETCH_OBJ)) {

        echo '<tr>'
        . '<form action="' . $param . 'Delete.php"  method="post">';
        $n = "nom_" . $param;
        $nom = $resultat->$n;
        echo '<td>' . $nom . '</td>'
        . '<input id="' . $param . 'delete" type="hidden" name="delete" value="'.$nom.'"    />'
        . '<td><input type="button"  onclick="remove();" value="Supprimer" /></td>'
        . '</form>'
        . '</tr>';
    }

    echo '</table>';
}

我想在每次点击“Supprimer”按钮时删除表格中的整个tr。

function remove(){
    $().live('click',function(){
        var whichtr = $(this).parent().parent();
        whichtr.remove(); 
    });
}

我做错了什么？我使用$(this).parent().parent(); 从button 到td 和从td 到tr 然后尝试删除它，但该功能只删除按钮。

我也试过了，没有成功：

function remove(){
    $().live('click',function(){
        var whichtr = $(this).closest("tr");
        whichtr.remove(); 
    });
}

【问题讨论】：

标签： javascript php jquery html xml

【解决方案1】：

由于内联 javascript 事件处理程序被认为是不好的做法，我删除了它们并在 javascript 本身中创建了一个单击事件处理程序。

假设这个示例 html：

<table>
    <tr>
        <form>
        <td></td>
        <input type="hidden" />
        <td>
        <input type="button"  class="remove" value="Supprimer" />            
        </td>
        </form>
    </tr>    
    <tr>
        <form>
        <td></td>
        <input type="hidden" />
        <td>
        <input type="button"  class="remove" value="Supprimer" />            
        </td>
        </form>
    </tr>
</table>

下面的js可以工作：

$('table').on('click', '.remove', function() {
    $(this).closest('tr').remove();
});

Working Example

【讨论】：

您的代码在您提供的 jfiddle 上运行良好，但仍然只删除了我的代码上的按钮。但无论如何感谢您的回答。仍在寻找，我会随时通知您。
我找到了使用您的代码的解决方案。我给出了一个类名，并在 onclick() 中包含了 js 代码； .这是你想说的吗？
对不起，我的声誉低于 15 分，所以我不能投票给你回复
不，我的意思是你完全删除onClick()，改为添加类，并在外部js文件中添加js代码。很高兴你让它工作。好吧，你可以简单地接受我的回答（绿色勾号），因为它似乎已经解决了你的问题..
感谢您的帖子，因为使用内联事件处理程序是一种不好的做法，我认为您的解决方案比我的解决方案更好

【解决方案2】：

你不必创建一个处理程序来绑定“supprimer”上的点击事件，只要你有这个事件直接到按钮的 onclick 方法

所以你可以写这样的东西：

function remove(){
   var whichtr = $(this).closest("tr");
   whichtr.remove(); 
}

（未测试）

希望对你有帮助

【讨论】：

【解决方案3】：

下面试试

<input type="button"  onclick="remove(this);" value="Supprimer" />

删除方法如下：-

function remove(e){
      $(e).closest('tr').remove();
}

【讨论】：

【解决方案4】：

复制自问题：

如果我将 js 代码直接包含在生成的表单中，则可以：

function queryComposant($param) {
    $query = "SELECT nom_" . $param . " FROM " . $param . ";";
    $result = connectdb()->query($query)or die("Err " . $query);
    $resultat = $result->fetch(PDO::FETCH_OBJ);
    echo '<table border = "1" id="table' . $param . '">';

    foreach ($resultat as $value) {
    }

    while ($resultat = $result->fetch(PDO::FETCH_OBJ)) {

        echo '<tr>'
        . '<form action="' . $param . 'Delete.php"  method="post">';
        $n = "nom_" . $param;
        $nom = $resultat->$n;
        echo '<td>' . $nom . '</td>'
        . '<input id="' . $param . 'delete" type="hidden" name="delete"       value="'.$nom.'"     />'
        . '<td>'
        . '<input type="button" onclick="$(\'table\').on(\'click\', \'.remove\', function() {'
        . '$(this).closest(\'tr\').remove();});" class="remove" value="Supprimer" />'
        . '</td>'
        . '</form>'
        . '</tr>';
    }
    echo '</table>';
}

【讨论】：