jquery children attach remove edit input
<p>to get more than what you expect may be nice on your birthday - but this in script drives you crazy... :(</p>

<p>i've got the following code:</p>

<pre><code>    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="../scripts/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;div&gt;
    &lt;div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;"&gt;
    &lt;input type="button" id="id1_edit" class="editIcon" value="change"&gt;
    &lt;span id="id1_Label" class="fragenLabel"&gt;
    &lt;p&gt;
    &lt;span style="margin-left:5px;"&gt;
    &lt;b&gt;something&lt;/b&gt;
    &lt;/span&gt;
    &lt;/p&gt;
    &lt;/span&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/form&gt;
    &lt;/body&gt;

    &lt;script type="text/javascript"&gt;


    $(document).ready(function () {
    showMain();
    });
    function showMain() {

    $('.editIcon').css("cursor", "pointer").click(function () {
    edit($(this).attr("id"));
    });

    $('.editfinish').css("cursor", "pointer").click(function () {
    editFinish($(this).attr("id"));
    });
    }

    function edit(idTemp) {
    //alert(fragenidTemp);
    var IdArray = idTemp.split("_");
    var Id = IdArray[0]
    var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("&lt;input id=input" + Id + " type=text size=70 style=margin-left:4px;&gt;&lt;/input&gt;&lt;input type=button id=" + Id + " class=editfinish value=change /&gt;");

    $('input[id|="input' + Id + '"]').val(inputValue);
    $('.editIcon').hide();
    showMain();
    }


    function editFinish(Id) {
    var inhaltFrage = $('input[id|="input' + Id + '"]').val();
    $('.editIcon').show();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
    $('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("&lt;b&gt;" + inhaltFrage + "&lt;/b&gt;");

    showMain();
    }

    &lt;/script&gt;

    &lt;/html&gt;
</code></pre>

<p>what I want is an input field that reacts like a normal input field - but after the first (correct) change of value the form shows three times the input field...</p>

<p>Does someone have an idea? As it is a condensed script of a larger script so I need the structure of functions. Thanks for your help :)</p>
