Add / Remove Elements Dynamically_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-22 15:33 出处：网络

Now i done the ADD /Remove Elements How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,

Now i done the ADD /Remove Elements

How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,

Add / Remove Elements Dynamically

category which populate records from database category table, and when user select the particular category than sub category will populate from datbase sub category table,

am looking one jquery or some open which do this same work,

refer some good plugins,

How to add the element when i click the ADD Elment, please chekc my code below

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" >
$(document).ready(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
        hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
        var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element  "+hdn_add_element_cnt+" <a href=\"#\" onclick=\"delete_element("+hdn_add_element_cnt+")\">Delete</a></div>";
        $('#element_area').append(app_str);

    $("#add_element").click(function(){
        var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
        hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
        hdn_add_element_cnt = hdn_add_element_cnt+1;
        var app_str = "<div id=element_"+hdn_add_element_cnt+">Ne开发者_开发技巧w Element  "+hdn_add_element_cnt+" <a href=\"#\" onclick=\"delete_element("+hdn_add_element_cnt+")\">Delete</a></div>";
        $('#element_area').fadeIn(10000).append(app_str);
        //Increment Elemenet ID Count +1

        document.getElementById("hdn_add_element_cnt").value = hdn_add_element_cnt;

    })
})

function delete_element(element_id_no){
    var get_element_hidden_cnt = $("#hdn_add_element_cnt").val();
    $("#element_"+element_id_no).fadeOut(100).remove();
}
</script>
</head>
<body>
<div style="width:500px; height:200px; background-color:#FF0000;">
    <div id="add_element" style="width:400px; height:75px;">
        ADD Element
    </div>
    <div id="element_area">

    </div>
</div>
<input type="hidden" id="hdn_add_element_cnt" value="1" />
</body>
</html>

jQuery doesn't need plugins to do this. Standard functions work well:

.append() adds elements, so to add a <div> to the <body>, just do this:

$('body').append('<div id="foobar">This is my text</div>');

.remove() similarly removes elements, so to remove that <div> that you added, just do this:

$('#foobar').remove();

.html() and .text() can be used to set the contents of an element. .text() is usually for setting the displayed text, and .html() is for adding content elements:

$('#foobar').text('Hello');
$('#foobar').html('<h1 class="foo">Hello</h1>');

Your question is really vague, so I'm not sure what else to say.

Add / Remove Elements Dynamically

精彩评论

关注公众号

热门标签

图文推荐

Add / Remove Elements Dynamically

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：