Javascript Jquery使用html对象添加更多内容

我正在尝试使用jQuery html对象实现addmore功能，下面是代码

var addmorehtml = $("<div><div class='btndiv'><label>Category Name : </label><input type='text' name='catname[]'></div></div>");
var  HTML = addmorehtml;
var clickcount = 1;

$('button#addmore').on('click', function(){
    HTML.find('div.btndiv').wrap("<div id='so_" + clickcount + "'></div>");
    $("<button class='removeme' onClick='removeMe(\"" + clickcount +"\")'>Remove Me</button>").insertBefore(HTML.find('div.btndiv'));
    $('div#result').append(HTML.html());  

    /* Why do I need to do this two steps  START */ 
    HTML.find('div.btndiv').unwrap("<div id='so_" + clickcount + "'></div>");   
    HTML.find('button.removeme').remove();
    /* END */
    clickcount++;  
});

var addmorehtml=$（“类别名称：”）；
var HTML=addmorehtml；
var-clickcount=1；
$（'button#addmore'）。在（'click'，function（）上{
HTML.find（'div.btndiv'）.wrap（“”）；
$（“删除我”）.insertBefore（HTML.find（'div.btndiv'）；
$（'div#result'）.append（HTML.HTML（））；
/*为什么我需要执行这两个步骤开始*/
HTML.find（'div.btndiv'）。展开（“”）；
find（'button.removeme'）.remove（）；
/*结束*/
点击计数++；
});

如果我不在最后打开添加的html，它会继续添加到创建的新元素中。我知道有很多方法可以添加更多内容，但如果我想这样做，那么应该对现有代码进行哪些修改，这样我就不需要执行注释之间提到的那些步骤

任何帮助都将不胜感激

小提琴链接：

JSFIDDLE演示->

如下所示，将html blob直接添加到

div#result

中，而不是将其破坏

var clickcount = 1;

$('button#addmore').on('click', function() {

    var addmorehtml = $("<div id='so_" + clickcount + "'><button class='removeme' onclick='removeMe(" + clickcount + ")'>Remove Me</button><div class='btndiv'><label>Category Name : </label><input type='text' name='catname[]'></div></div>");

    $('div#result').append(addmorehtml);

    clickcount++;

});

function removeMe(id) {
    $('div#so_' + id).remove();
}

var clickcount=1；
$（'button#addmore'）。在（'click'，function（）上{
var addmorehtml=$（“删除MeCategory名称：”）；
$（'div#result'）.append（addmorehtml）；
点击计数++；
});
函数removeMe（id）{
$（'div#so#'+id）.remove（）；
}

JSFIDDLE演示->

你只是想修改你现有的代码，但我想给你另一个答案，这比我之前发布的修改答案要好

下面的答案删除了

clickcount

的用法，并使用事件委派来捕获删除事件

$('button#addmore').on('click', function() {    
    var addmorehtml = $("<div id='so'><button class='removeme'>Remove Me</button><div class='btndiv'><label>Category Name : </label><input type='text' name='catname[]'></div></div>");
    $('div#result').append(addmorehtml);
});

$(document).on('click', '.removeme', function() {
    $(this).parent('#so').remove();
});

$（'button#addmore'）。在（'click'，function（）{
var addmorehtml=$（“删除MeCategory名称：”）；
$（'div#result'）.append（addmorehtml）；
});
$（文档）.on（'click'，'removeme'，函数（）{
$（this）.parent（'#so'）.remove（）；
});

查看没有这两行的结果html。这很明显。

unwrap

行防止id重复，

remove

行防止DOM中出现多个删除按钮