Jquery 在单击按钮时动态添加和删除组件?

Jquery 在单击按钮时动态添加和删除组件?,jquery,Jquery,如何通过jquery动态添加和删除组件 我想在我的页面上单击添加添加一行,然后在该行中将出现新的文本框 在“我的页面上单击“删除”按钮时删除选中的复选框中,行必须与其组件(如文本框)一起删除 我如何使用jquery var parent = document.getElementById('id'); var next = $.create("<div></div>"); $.append(parent); 要删除$'myelement'。请删除'id'以查看演示请尝

如何通过jquery动态添加和删除组件

我想在我的页面上单击添加添加一行,然后在该行中将出现新的文本框 在“我的页面上单击“删除”按钮时删除选中的复选框中,行必须与其组件(如文本框)一起删除

我如何使用jquery

var parent = document.getElementById('id');
var next = $.create("<div></div>");
 $.append(parent);
要删除$'myelement'。请删除'id'

以查看演示

请尝试以下操作

<html>
<head>
    <title>m2z</title>
    <script type="text/javascript">     
        function addNew() {             
            var mainContainer = document.getElementById('mainContainer');               
            var newDiv = document.createElement('div');             
            var newText = document.createElement('input');
            newText.type = "input";
            var newDelButton = document.createElement('input');
            newDelButton.type = "button";
            newDelButton.value = "Delete";
            newDiv.appendChild(newText);                
            newDiv.appendChild(newDelButton);               
            mainContainer.appendChild(newDiv);              
            newDelButton.onclick = function() {
                    mainContainer.removeChild(newDiv);
            }
        }
    </script>
</head> 
<body >
    <div id="mainContainer">
        <div><input type="text" ><input type="button" value="Add" onClick="addNew()"></div>
    </div>
</body>