I've created li elements and after every li elements there is a div of class crossSign which contains two rectangles making a cross. I want it to when clicked remove it's previous sibling and remove the cross itself. But it's not working when clicked. Can someone tell me what is the problem. And i can't give the html or the css cause im afraid if someone copy it.

    $newform.on('submit', function(e) {
    e.preventDefault();
    var text = $newform.find('input:text').val();
    var url = document.getElementById('addurl').value;
    $list.append('<a href="'+ url +'"><li class="links"><span>' + text +'</span></li></a>');
    $list.append('<div class="crossSign"><div class="line1"></div><div class="line2"></div></div>');
    //$('a').attr('href', url);
    $newform.find('input:text').val('');
    $addurl.val('');
});
$('#close-form').on('click', function() {
    $newform.hide();
    $newlinks.show();
});
$('.crossSign').on('click', function() {
    $(this).prev().remove();
    $(this).remove();
});