尝试使用javascript删除两行答案

【问题标题】：Trying to delete two rows using javascript尝试使用javascript删除两行
【发布时间】：2014-02-11 22:34:04
【问题描述】：

我正在尝试同时删除动态表中的两个表行，但我无法同时删除多个行。我有一个表格，它在一个 tr 中显示文本和一个删除按钮，在它之后的下一个 tr 中显示其他相关文本。当我按下第一行上的删除按钮时，该行被删除，但之后的行没有被删除。我尝试使用此link 获取下一行的值/地址，但它似乎对我不起作用。

正在工作中： http://jsfiddle.net/DLqLW/3/

删除行的按钮是这样编码的：

<input type="button" id="<?php echo $str; ?>" class="button-add" name="butcli" value="-" onClick="deleteRow(this)"></input>

它调用的函数是：

function deleteRow(el) {

                            while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
                                el = el.parentNode;
                            }
                            if (el.parentNode && el.parentNode.rows.length > 1) {
                                el.parentNode.removeChild(el);
                            }
                        }

我正在努力解决如何删除它之后的下一行。如果有人可以提供一些帮助，那就太好了！

【问题讨论】：

表格的HTML？也许是小提琴？
试图搞定，但目前我也遇到了一些问题。
jsfiddle.net/DLqLW/3 我已经创建了一个小提琴，但 javascript 无法正常工作，应该发生的是，如果您单击包含它们的任何行上的减号按钮，它正下方的行应该也被删除。
小提琴不起作用，因为它需要在 <head> 中声明的函数，正如您将在我的中看到的那样：jsfiddle.net/digitalextremist/DLqLW/5 - 此外，它确实需要 parentNode.rows.length > 0正如@MazeHatter 所说。
jsfiddle.net/9Zv83 更新小提琴；现在小提琴正在工作，我想要完成的是，例如，如果我删除了包含数字 2 的行，那么它下面的行也应该被删除。我尝试了更快提到的 nextSibling 函数，但它没有产生任何结果。

标签： javascript html

【解决方案1】：

你只有两行吗？

你正在测试：

parentNode.rows.length > 1

如果你只有两行，它不会删除第二行。

改成：

parentNode.rows.length > 0

【讨论】：

我有不止 2 行，代码 >1 应该指定当用户删除行时应该留在表中的最小行数。

【解决方案2】：

试试这个

http://www.w3schools.com/dom/dom_nodes_navigate.asp

function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}

【讨论】：

我输出了 y 的值，它给了我 [object Text]。我试过使用 y.parentNode.removeChild(y);但它不起作用。我错过了一步吗？

【解决方案3】：

替代（更简单？）方法：使用`<div>` 而不是兄弟`<tr>`

另一种方法，保持简单，避免使用 jQuery，并避免 nextSibling 和相关问题：

工作小提琴： http://jsfiddle.net/digitalextremist/9Zv83/3/

...使用这种 HTML 方法：

<tr>
    <td>1
        <div>this row should be deleted if the one above is removed.</div>
    </td>
    <td>
        <input type="button" id="<?php echo $str; ?>" class="button-add" name="butcli" value="-" onClick="javascript:deleteRow(this)"></input>
    </td>
</tr>

此外，您现有的版本依赖于一个短一个单元格的<tr>。如果您将colspan=2 添加到您的兄弟行，那么格式也会被丢弃......因此我提出了这种方法。

【讨论】：

【解决方案4】：

使用 Jquery 这是可行的

function deleteRow(el) {
   var tr = $(el).closest('tr');
        tr.css("background-color","#FF3700");
        tr.fadeOut(400, function(){
            tr.remove();
        });
    var tr2 = $(tr).closest('tr').next();
        tr2.css("background-color","#FF3700");
        tr2.fadeOut(400, function(){
            tr.remove();
        });
}

看起来也很时髦我用你的 jfiddle 和 jQuery 2.02

【讨论】：

但他们也没有指定不使用它
如果 OP 未指定，则使用 jQuery 进行行删除，在我看来不符合作为答案的条件。这是环境和理论的改变，而不是按要求的解决方案。
幸运的是，您与决定它是否回答了 OP 的问题无关。由于我的示例可能是唯一有效的示例，因此它比大多数示例具有更好的机会。如果有像没有 jQuery 这样的约束，问题中会提到它，否则它根本不是一个有效的问题

替代（更简单？）方法：使用&lt;div&gt; 而不是兄弟&lt;tr&gt;

替代（更简单？）方法：使用`<div>` 而不是兄弟`<tr>`