clearing append()

by olatech

HTML

<body>
    <div class="canvas"></div>
    
<h4>Draw 2 separate boxes.  Press button.  Draw third box.</h4>

    <p>Undesirable result: coordinates from box 1 and 2 weren't erased.</p>
    <textarea rows="4" cols="100" id="output" wrap="off"></textarea>
    <p>
        <button id="clearoutput">Clear</button>
    </p>
</body>

CSS

.canvas {
    position: static;
    border: 1px solid orange;
    width: 400px;
    height: 200px;
    text-align: center;
    color: #666;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.selection-box {
    position: absolute;
    background: transparent;
    border: 1px dotted #000;
}

JavaScript

$(document).ready(function () {
    var $container = $('.canvas');

    // clear textarea when button is clicked
    // (doesn't work - text is still there when next drawing starts)
    $("#clearoutput").click(function (e) {
        $("#output").empty();
    });

    $container.on('mousedown', function (e) {

        // clear textarea on start of new drawing 
        // (prevents appending whole textarea content instead of just new line.  Is there a better way?)
        $("#output").empty();

        var $selection = $('<div>').addClass('selection-box');
        var os = '';
        var click_y = parseInt(e.pageY, 10);
        var click_x = parseInt(e.pageX, 10);
        $selection.css({
            'top': click_y,
                'left': click_x,
                'width': 0,
                'height': 0
        });
        $selection.appendTo($container);

        $container.on('mousemove', function (e) {

            var move_x = e.pageX;
            var move_y = e.pageY;
            var width = Math.abs(move_x - click_x);
            var height = Math.abs(move_y - click_y);
            var new_x, new_y;
            new_x = (move_x < click_x) ? (click_x - width) : click_x;
            new_y = (move_y < click_y) ? (click_y - height) : click_y;
            $selection.css({
                'width': width,
                    'height': height,
                    'top': new_y,
                    'left': new_x
            });

        }).on('mouseup', function (e) {

            $container.off('mousemove');
            os = String(
                "width='" + parseInt($selection.width(), 10) +
                "' 'height='" + parseInt($selection.height(), 10) +
                "' left='" + parseInt($selection.offset().left - $container.offset().left, 10) +
                "' top='" + parseInt($selection.offset().top - $container.offset().top, 10) +
                "'" + "\n");

            // append textarea when drawing is done
            $("#output").append(os);
  ...