jQuery appending html issue

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...

Kokos · Accepted Answer · 2011-06-27 09:34:13Z

2

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/

answered Jun 27, 2011 at 9:34

Kokos

9,1715 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prajan Over a year ago

@Kokas : thanks for your quick suggestion.. it works fine now.

Jayantha Lal Sirisena · Accepted Answer · 2011-06-27 09:41:14Z

0

http://jsfiddle.net/3MRK9/5/ see now

answered Jun 27, 2011 at 9:41

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Collectives™ on Stack Overflow

jQuery appending html issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related