Question

I am trying to append values from one div to another div.

Here is the HTML:

<div>
<input id="appendval" type="text" class="formStyle" style="width:300px">&nbsp;&nbsp;
    <a id="addtolist" onClick="appendthis()" href="javascript:void(0)">Add</a><br><br>
    <div id="addedlist" style="width:300px;height:80px;border:1px #ccc solid;"></div>

    <div id="valdiv" style="display:none">
        <div>
            <img onClick="removethis(this)" src="http://www.penguinmodernclassics.ca/static/images/all/close_icon.gif" >
        </div>
    </div>

</div>

The script:

function appendthis() {
    var values = jQuery('#appendval').val();
    jQuery('#valdiv img').after(values);
    jQuery('#addedlist').append(jQuery('#valdiv').html());
    jQuery('#appendval').val('');
}
function removethis(cur) {
    jQuery(cur).closest('div').remove();
}

The problem is the previous value added up with the new value, every time i click to add.

You can see the above code live here: http://jsfiddle.net/prajan55/3MRK9/

Kindly help…

Answer 1

The problem is, you don’t remove the old text after you add it behind the image. You need an extra container to hold the text so you can easily clear it:

http://jsfiddle.net/3MRK9/2/