Question

我有一张表，我动态添加新行。添加一行后，它看起来像这样：

<table>
<tbody id="list">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr class="new1">                           //
    <td class="new1">D</td>                   //
    <td class="new1">E</td>                   //  These lines
    <td class="new1">                         //  are dynamic
      <a href="#confirm" class="new1">X</a>   //
    </td>                                     //
  </tr>                                       //
</body>
</table>

我希望能够通过单击最后一列中的X符号来单独删除新行，这会将我重定向到对话框以确认。对话很简单 - 两个按钮：是/否。

我的想法是获取点击一个元素的类，将其保存为变量，然后在单击“是”按钮时使用它以删除该特定类的所有元素。

我制作的剧本看起来像这样：

// For saving class of clicked link in list
var delId;
$(document).on("click", "#list a", function(){
  delId= $(this).attr("class");
});

// Then I try to remove elements by class
$("#idOfYesButton").click(function(){
    $("."+delId).remove();
});

但它在某种程度上什么都不做，我无法理解为什么，所以如果你能告诉我我做错了什么，那将是最受欢迎的。

Answer 1

尝试这样的事情：fiddle

<table>
    <tr class="new1">
        <td class="new1">D</td>
        <td class="new1">E</td>
        <td class="new1"> <a href="#" class="remove">X</a> 
        </td>
    </tr>
    <tr class="new1">
        <td class="new1">D</td>
        <td class="new1">E</td>
        <td class="new1"> <a href="#" class="remove">X</a> 
        </td>
    </tr>
    <tr class="new1">
        <td class="new1">D</td>
        <td class="new1">E</td>
        <td class="new1"> <a href="#" class="remove">X</a> 
        </td>
    </tr>
</table>

的jQuery

$(".remove").click(function () {
    if (confirm("sure you want to delete?") === true) {
    $(this).closest('tr').remove();
    }
    else return;
});

Answer 2

试试这个脚本

$(document).on("click", "#list tr td a", function(){
  if(confirm($(this).attr("class")))
        $("."+$(this).attr("class")).remove();
});

删除表中动态创建的行

2 个答案: