I have a form the user put values and submit and an image of cross is also appended at the same time as a sibling. I want the image to when clicked remove itself and it's previous sibling. But it's not working

$newform.on('submit', function(e) {
    e.preventDefault();
    var text = $newform.find('input:text').val();
    var url = document.getElementById('addurl').value;
    $list.append('<li class="links"><a href="'+ url +'"><div class="spann">' + text +'</div></a></li>');
    $list.append('<img src="images/close.png" class="cross">');
});
$('.cross').on('click', function() {
    $(this).prev().remove();
    $(this).remove();
});