Javascript 动态添加和删除无效的HTML元素_Javascript_Jquery_Html_Css

Javascript 动态添加和删除无效的HTML元素

javascript jquery html css

Javascript 动态添加和删除无效的HTML元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要在我的产品表单中动态添加和删除HTML元素（属性添加目的），并且正在搜索堆栈溢出我发现这个解决方案非常接近（除了它没有删除选项，加上我真的不知道如何检索每个文本框的数据，但所有这些都是以后的事情）小提琴中的代码工作正常。但当我在本地机器上尝试时，它没有产生任何结果这就是我所做的 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

我需要在我的产品表单中动态添加和删除HTML元素（属性添加目的），并且正在搜索堆栈溢出

我发现这个解决方案非常接近（除了它没有删除选项，加上我真的不知道如何检索每个文本框的数据，但所有这些都是以后的事情）

小提琴中的代码工作正常。但当我在本地机器上尝试时，它没有产生任何结果

这就是我所做的

index.html

<!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=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
        .extraPersonTemplate {display:none;}
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
             $('<div/>', {
                 'class': 'extraPerson',
                 html: GetHtml()
             }).appendTo('#container');
             $('#addRow').click(function () {
                 $('<div/>', {
                     'class': 'extraPerson',
                     html: GetHtml()
                 }).hide().appendTo('#container').slideDown('slow');

             });
         })

         function GetHtml() {
             var len = $('.extraPerson').length;
             var $html = $('.extraPersonTemplate').clone();
             $html.find('[name=firstname]')[0].name = "firstname" + len;
             $html.find('[name=lastname]')[0].name = "lastname" + len;
             $html.find('[name=gender]')[0].name = "gender" + len;
             return $html.html();
         }    
    </script>

</head>

<body>
<div class="extraPersonTemplate">
    <div class="controls controls-row">
        <input class="span3" placeholder="First Name" type="text" name="firstname">
        <input class="span3" placeholder="Last Name" type="text" name="lastname">
        <select class="span2" name="gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </div>
</div>
<div id="container"></div>
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a>
</body>
</html>


无标题文件
.extraPersonTemplate{显示：无；}
$（文档）.ready（函数（）{
$('', {
“类”：“外部人员”，
html:GetHtml（）
}).appendTo（“#container”）；
$（'#addRow'）。单击（函数（）{
$('', {
“类”：“外部人员”，
html:GetHtml（）
}).hide（）.appendTo（“#container”）.slideDown（'slow'）；
});
})
函数GetHtml（）{
var len=$（'.extraPerson'）.length；
var$html=$（'.extraPersonTemplate'）.clone（）；
$html.find（'[name=firstname]'）[0].name=“firstname”+len；
$html.find（'[name=lastname]'）[0].name=“lastname”+len；
$html.find（'[name=gender]'）[0].name=“gender”+len；
返回$html.html（）；
}    
男性
女性

这就是结果

复制粘贴时哪里出错了？

将JavaScript移动到

标记的正上方

我认为如果您试图在页面加载元素之前访问它们，那么它将无法工作

正如其他答案所指出的，请确保您已将jQuery包含在页面的

部分。

您需要加载jQuery库

您可以在JSFIDLE中看到，您包含了这些库，但在复制粘贴时没有包含它们。包括这些Java脚本

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

您需要包括。如果您检查您的（您肯定应该检查），您可能会发现以下错误：

$ is not defined

这是因为在您尝试使用jQuery之前没有加载它。在javascript代码之前将其添加到页面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

great ho tussi。。。查阿gaye@ManishB，Shai hai，kuch english mein bhi likh de angrezo ke liye.：）