jquery remove row on click not working?

Question

continue to tomorrows question

function n() {
  $('.m').on('click',function() {
    var id = $(this).closest("tr").find(".t").text();
    var p= $(this).closest("tr").find(".t1").text();
    $('#c').append('<li class='li'>',id,<span class='c'>'"X"'</span>','</li>');
  });
} 
<style>
.c:hover
{
color:red;
}
.li
{
}
<script type="text/javascript">
$(document).on('click','.c',function()           
{

    $(this).closest("li").remove()
    alert("ok");
});

</script> 

on clicking this 'X' symbol i want to delete that list,'OK' in alert printed but remove function not working why?

Answer 1

Be sure to add the appropriate script and style tags within the markup. They should also be closed appropriately, for example the style tag is unclosed. The unclosed style tag could be causing problems.

Also within the script there are single quotes that are nested incorrectly. Use outer single quotes to denote the string literal and double quotes within the string literal when required such as in markup. It also appears you are attempting to concatenate using , however in Javascript the concatenation operator is +.

<script> <!-- I didn't exist />
function n() {
  $('.m').on('click',function() {
    var id = $(this).closest("tr").find(".t").text();
    var p= $(this).closest("tr").find(".t1").text();

    //Concatenation and String literal fixed here
    $('#c').append('<li class="li">' + id + '<span class="c">X</span></li>');
  });
} 
</script>

<style>
    .c:hover
    {
        color:red;
    }

    .li
    {
    }
</style><!-- I wasn't closed -->

<script type="text/javascript">
$(document).on('click','.c',function()           
{

    $(this).closest("li").remove()
    alert("ok");
});

</script>