如何從圖像中使用點擊功能從表單中刪除動態創建的元素？

如何從圖像中使用點擊功能從表單中刪除動態創建的元素？代碼：如何從圖像中使用點擊功能從表單中刪除動態創建的元素？

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

來源

2011-01-29 Vinay Gayakwad

請代碼減少到說明這一點的最低要求。這太多了。 – Oded 2011-01-29 11:12:47

是否有任何理由jQuery和jquery-ui包含多次？（3x）....並且在此代碼塊中完全不使用？ – 2011-01-29 11:15:38

你的情況先選擇對象的容器draggable1，然後從容器中選擇孩子和刪除根據在指數

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

- >但是這將刪除所有的孩子

或可以有選擇地過濾孩子喜歡

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

或兒童另一個過濾器對象使用兒童的索引

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

來源

2011-01-29 12:27:33 ikhsan

我看到你使用jQuery ...

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

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

});

來源

2011-01-29 11:14:31 raultm

如何從圖像中使用點擊功能從表單中刪除動態創建的元素？

回答

相關問題