Переключить между созданием и уничтожением строки таблицы jquery

Question

Я работаю над функцией выпадающего списка для таблицы, которая заполняет свои данные с помощью mysql. Когда пользователь нажимает кнопку, он создает новую строку таблицы под текущей, содержащей кнопку. Желаемая цель - сделать так, чтобы кнопка удаляла вновь созданную строку, если она снова нажата, теперь она просто будет создавать новые новые. Вот то, что я до сих пор:

Table (PHP):

while($sound=mysql_fetch_assoc($records)){ 
    echo "<tr>"; 
    echo "<td width='40' class='player'>&nbsp;&nbsp;<a href='beats/".$sound['downloadlink']."' class='sm2_button'>Play/</a></td>"; 
    echo '<td width="250" class="name">'.$sound['name'].'&nbsp;&nbsp;&nbsp;<span class="red date">'.$sound['date'].'</span></td>'; 
    echo "<td width='88' class='bpm'>".$sound['bpm']." B.P.M.</td>"; 
    echo "<td width='72' class='length'>".$sound['length']."</td>"; 
    echo "<td width='275' class='keywords'>".$sound['keywords']."</td>"; 
    echo "<td width='96' class='buy'><img class='button' src='99cents.png'/></td>"; 
    echo "</tr>"; 

Создать новую строку таблицы:

$(".button").on('click', function(){ 
    $(this).parents('tr').after('<tr><td height="100" colspan="6"><img src="mp31.png"/></td></tr>'); 
}); 

Попытка переключения между созданием и удалением таблица строк:

$(".button").on('click', function(){ 

    .toggle($(this).parents('tr').after('<tr><td height="100" colspan="6"><img src="mp31.png"/></td></tr>'); : .remove()); 
}); 

Answer 1

Я начал отвечать перед вашей проводкой стола таким образом, это простая разметка я использовал:

<table id="mytable"> 
    <tr class="adder"> 
     <td>I am the adder row</td> 
     <td width='96' class='buy'> 
      <img class='button' src='99cents.png' /> 
     </td> 
    </tr> 
</table> 

Затем я использовал этот:

$('#mytable').on('click', ".button", function() { 
    alert('Got the click'); 
    var thisRow = $(this).parents('tr.adder'); 
    var hasNextRow = thisRow.next('tr.added').length; 
    if (hasNextRow) { 
     alert("removing"); 
     thisRow.next('tr.added').remove(); 
    } else { 
     alert("adding"); 
     $(this).parents('tr.adder').after('<tr class="added"><td height="100" colspan="6" ><img src="mp31.png"/>howdy i am new</td></tr>'); 
    } 
}); 

проверить его здесь: http://jsfiddle.net/MarkSchultheiss/d6peafsp/1/

Answer 2

Возможно, вы используете jQuery.toogle.

Это простой пример, чтобы использовать его давая правильный/правильный CSS selector:

$('.toggle-btn').on('click', function(){ 
    $('tr:last').toggle(); 
}); 

See JSFiddle demo

EDIT:

Этот другой JSFiddle demo делает то же самое но первый раз добавляет строку в таблицу