用jquery删除表行

时间:2013-08-21 13:45:07

标签: javascript jquery

我无法让这个javascript工作 - 它被问了一百万次,我在SO上看了很多不同的例子,但是......无济于事。

这是代码:

// modifed from http://stackoverflow.com/a/6520723/2128691

var count = 1;
var goal = 0;

$(function() {
    $('#add_goal').click(function() {
        addGoal();
    });
});

$(function() {
    $('#remove_goal').click(function() {
        removeGoal();
    });
});


function addGoal()
{
    $('#goal_form').append('<tr></tr>');
    $('#goal_form').append('<td class="goal_field fields"><input id="goal_goal" name="goal[goal]" placeholder="Students should..." size="30" type="text" /></td>');
    count++;
}

function removeGoal() 
{
    $('tr').remove();
    count--;
}

它非常接近工作,所以我认为它只是一个小问题 - 我可以添加尽可能多的字段,我可以删除一行,但只有一次。删除一次目标后,再次单击该链接不会执行任何操作(尽管“添加”仍然有效)。

2 个答案:

答案 0 :(得分:2)

这一行:

$('tr').remove();

将删除所有行。

此外,这些行没有意义

$('#goal_form').append('<tr></tr>');
$('#goal_form').
   append('<td class="goal_field fields"><input id="goal_goal" name="goal[goal]" placeholder="Students should..." size="30" type="text" /></td>');
  1. 您未在 tr 中附加 td
  2. #goal_form吗?如果不是,您只能将表格行添加到其中。

答案 1 :(得分:0)

得到了这个答案的帮助:

https://stackoverflow.com/a/6570175/2128691

function removeGoal() 
{
    $('#goal_form tr:last').remove();
    count--;
}