how can i remove dynamically created elements from form by using click function on image?

Question

how can i remove dynamically created elements from form by using click function on image? the code is:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>
<TITLE>Attendee's List</TITLE>
<script type="text/javascript"src="js/atendee_jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js" /> </script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>

<!--<div id="draggable" class="ui-widget-content">-->
<script type="text/javascript" />
var ii=0;
function add(type) {

    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2=document.createElement("input");
    var element3=document.createElement("img");
    var e="img"+type;
    element3.setAttribute("type","img");
    element3.setAttribute("value",type);
    element3.setAttribute("src","C:/Documents%20and%20Settings/Gayakwad/Desktop/MpPro/WebContent/img/delete.png");
    element3.setAttribute("name", e);

    element2.setAttribute("type", "text");
    element2.setAttribute("value", type);
    ii=ii+1;
    var o=type+ii;
    element2.setAttribute("name", o);

    //Assign different attributes to the element.
    element.setAttribute("type", "checkbox");
    element.setAttribute("value", type);
    var d="chk"+type;
    element.setAttribute("name",d);
    // element3.addEventListener("onclick",element2.removeAttribute("text1"),false);
    var foo = document.getElementById("draggable1");

    //Append the element in page (in span).

    foo.appendChild(element2);
     foo.appendChild(element);
     foo.appendChild(element3);
 remove_option(menu);

    var mybr = document.createElement("br");
foo.appendChild(mybr);
var mybr2 = document.createElement("br");
foo.appendChild(mybr2);


}
</script>


<script type="text/javascript">
</script>
<!--</div>-->
<script language="javascript">
function remove_option(selectbox)
{
var i;
var sel=selectbox.selectedIndex;
selectbox.remove(sel);
}
</script>
<style>
    #draggable1 { width: 150px;  padding: 0.5em; }
    #draggable1 h3 { text-align: center; margin: 0; }
    </style>

<script>
    $(function() {
        $( "#draggable1" ).draggable();
        $( "#draggable1" ).resizable({
                handles: "n, e, s, w"
      });
    });

</script>

<script type="text/javascript">
function ShowHide(divId)
{
var ele=document.getElementById(divId);
ele.remove(divId);
}
</script>

</HEAD>

<BODY>
<div id="attendee_list">
<FORM>
<H2>Select the fields you want from list and press add.</H2>
<BR/>
<h4>Select the fields that are visible public</h4>

<SELECT name="element" id="menu">
    <OPTION value="Name">Name</OPTION>
    <OPTION value="Age">Age</OPTION>
    <OPTION value="Date of birth">Date of birth</OPTION>
    <OPTION value="Designation">Designation</OPTION>
    <OPTION value="E-mail ID">E-mail ID</OPTION>
    <OPTION value="Contact Number">Contact Number</OPTION>
    <OPTION value="Place">Place</OPTION>
    <OPTION value="Company Name">Company Name</OPTION>
    <OPTION value="Address">Address</OPTION>
    <OPTION value="Number of guests">Number of guests</OPTION>
    <OPTION value="Comments">Comments</OPTION>
</SELECT>

<INPUT type="button" value="Add" onClick="add(document.forms[0].element.value)" style="position:fixed; top:146px; left:150px"/> 
 <input type="submit" value="Submit" style="position:fixed; top:146px; left:200px" /> 
 <input type="button" value="Delete element" style="position:fixed; top:146px; left:270px" onClick="ShowHide('text0')"/> 
<span id="fooBar"> <br/>&nbsp; &nbsp; &nbsp;<br/></span>

<!--<span id="fooBar1"> &nbsp; &nbsp; &nbsp;</span>-->

</div>
<br/>
<div id="draggable1" style="border:solid; min-width:200px; min-height:300px; position:relative; bottom:20px; display:block"></div>

</FORM>

</BODY>
</html>

Answer 1

first select your container of object in your case is draggable1, then select the children from container and remove based on index

$("#draggable1").children().remove();

-> but this will remove all children

or you can optionally filter the children like

$("draggable1").children(":contains('sometext')").remove();

or another filter in children object using the index of children

$("draggable1").children(":nth-child(0)").remove();

Answer 2

I see you're using jQuery...

$('#idImageElement').click(function(){

    $('.classElementsToRemove').remove();

});

how can i remove dynamically created elements from form by using click function on image?

Question

2 answers

solution1
3 ACCPTED 2011-01-29 12:27:33

solution2
2 2011-01-29 11:14:31

how can i remove dynamically created elements from form by using click function on image?

Question

2 answers

solution1 3 ACCPTED 2011-01-29 12:27:33

solution2 2 2011-01-29 11:14:31

solution1
3 ACCPTED 2011-01-29 12:27:33

solution2
2 2011-01-29 11:14:31