Question

What I’m doing here is appending some HTML as HTML to my clipboard.
However, I want to have the option to remove the last appended element/item from my clipboard.

How can I achieve this and is the following the most minimal and standardized way of scripting this?

 $(document).ready(function(){
    $('button:not("#delete")').click(function(e){
      $('#clipboard').append($(this).prev('div.images').html()
                 .replace(/\</ig, '&lt;')
                 .replace(/\>/ig, '&gt;'));
    });

    $('#delete').click(function(e){
        $('#clipboard').html(' ');

    });
    });

I already found an answer to this question but if there is another way of writing this more minimal and cleanly please make any suggestions. thanks

Answer 1

$('#delete').click(function(e) {
    $('#clipboard').html(' ');
});

Your emptying the entire clipboard.

What you want to do instead is $("#clipboard").children().last().remove();

Your also adding HTML to your div using .append rather then adding a DOM node.

var div = $("<div></div>");
div.append($(this).prev('div.images').html().replace(/\</ig, '&lt;').replace(/\>/ig, '&gt;'))
$('#clipboard').append(div);

If you add a DOM node instead then you can delete that. If you want inline elements then replace var div = $("<div></div>") with var span = $("<span></span>")

Live Example