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

Question

У меня есть кнопка, которая добавляет строку в таблицу. эта строка содержит текстовую область и переключатель и кнопку удаления. Как я могу удалить эту созданную строку, когда я нажимаю на только что созданную кнопку Удалить

<table id="tblAnswers"> 
    <tr> 
    <td><textarea id="Answer1" name="Answer1" rows="2" cols="20"></textarea></td> 
     <td> <input name="CorrectAnswer" id="CA" type="radio" value="0" /></td> 
    </tr> 
</table> 
<input id="AddAnswer" type="button" value="Add Answer now" /> 

<script> 
    var i = 1; 
    $("#AddAnswer").click(function() { 
    //this is to increment the answer id 
    i = i + 1; 

    $("#tblAnswers").append('<tr> <td><textarea id="Answer' + i + '" name="Answer' + i + '" rows="2" cols="20"></textarea></td><td> <input name="CorrectAnswer" id="CA" type="radio" value="0" /></td><td><div class="delete" id="bd" style="background-image: url(../Images/delete.png); height: 28px; width: 28px; " onclick="javascript:deleterow();"> </div> </td></tr>'); 
    });    
</script> 

я также попытался ниже, но это не сработало

<script> 
function deleterow(){ 
    $('table.actionsteps-list').on('click', '.delete', function (e) { 
    e.preventDefault(); // stops the page jumping to the top 
    $(this).closest('tr').remove(); 
    }); 
} 
</script> 

Answer 1

Когда Youre использованием делегированных событий (при условии, селектор для .click() метод) вам не нужна функция deleteRow в OnClick:

var i = 1; 
$("#AddAnswer").click(function() { 

    //this is to increment the answer id 
    i = i + 1; 


    $("#tblAnswers").append('<tr><td><button class="delete">Delete</button></td></tr>'); 
}); 

$('#tblAnswers').on('click', '.delete', function (e) { 
    $(this).closest('tr').remove(); 
}); 

Смотрите скрипку: http://jsfiddle.net/svsf0r98/

См. Также http://api.jquery.com/on/ в разделе делегированных событий.

Делегированные события часто используются, когда элементы будут добавляться динамически. Подход без делегированных событий будет:

var i = 1; 
$("#AddAnswer").click(function() { 

    //this is to increment the answer id 
    i = i + 1; 


    $("#tblAnswers").append('<tr><td><button onclick="deleteRow(this)">Delete</button></td></tr>'); 
}); 

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

http://jsfiddle.net/9u9L84ab/1/