动态添加/删除元素

时间:2011-04-07 16:14:08

标签: jquery-plugins jquery

现在我完成了添加/删除元素

如何动态添加/删除元素,请查找图像附件,以便更好地理解,enter image description here

从数据库类别表中填充记录的类别,当用户选择特定类别而不是子类别时,将填充数据库子类别表,

我正在寻找一个jquery或者一些打开它做同样的工作,

参考一些好的插件,

当我点击ADD Elment时如何添加元素,请在下面解释我的代码

       <!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+">New 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>

1 个答案:

答案 0 :(得分:1)

jQuery不需要插件来执行此操作。标准功能运作良好:

.append()添加了元素,因此要向<div>添加<body>,请执行以下操作:

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

.remove()同样删除了元素,因此要删除您添加的<div>,请执行以下操作:

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

.html().text()可用于设置元素的内容。 .text()通常用于设置显示的文本,.html()用于添加内容元素:

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

你的问题真的含糊不清,所以我不确定还有什么要说的。