We Keep Coding

why does my script wont append the ul in my class?

i have this script to append new message from client but it wont append to my ul list, don't know why but when i check in console it print 2 object from class chat-message one there is the ul and one not, but from this script it only append to .chat-message class one time and in the html i only have the container class and in the new .chat-message i empty my .message-user class and only add the ul tag to used it later when append new data
here is the html script
<div class="chat-message">
</div>
here is my js script.
function get_message_data(){
$(".client-message").on("click",function(){
$.ajax({
url:"msg",
method:"get",
data:{"data":this.id},
success:function(response){
data_response = JSON.parse(response)
add_data = add_data +
'<div class="header-message" value='+data_response[0].line_name+'>'+
'<div class="image-profile">'+
'<img src='+data_response[0].line_image+' alt="image-message">'+
'</div>'+
'<div class="username-profile">'+
'<label>'+data_response[0].line_name+'</label>'+
'</div>'+
'<button id="btn-exit" onclick="exit_app()">X</button>'+
'</div>'+
'<div class="message-user">'+
'<ul>'+
'</ul>'+
'</div>'+
'<div class="footer-message-send">'+
'<div class="file-send">'+
'<label for="btn-file-input"><i class="fas fa-archive"></i></label>'+
'<button id="btn-file-input" style="display:none;"></button>'+
'<input type="file" id="file-input" style="display: none;">'+
'</div>'+
'<div class="send-message">'+
'<input type="text" name="yellow" class="textinput">'+
'</div>'+
'<div class="button-send">'+
'<label for="send-message-admini"><i class="fa fa-paper-plane" aria-hidden="true"></i></label>'+
'<button id="send-message-admini" style="display:none;" type="button" value="submit"></button>'+
'</div>'+
'</div>'
$(".chat-message").empty();
$(".chat-message").append(add_data);
for(var i = 0; i < data_response.length; i++){
var add_template =
'<li class="message-send-client">'+
'<div class="client-message-send">'+
'<div class="message-header-send">'+
'<img src='+data_response[i].line_image+'>'+
'</div>'+
'<div class="user-message">'+
'<label>'+data_response[i].line_name+'</label>'+
'<p>'+data_response[i].message+'</p>'+
'</div>'+
'</div>'+
'</li>'+
$('.message-user').find('ul').append(add_template)
}
send_admin_message();
var interval = setInterval(function(){
update_message();
},3000)
}
})
id_user = this.id
})
}

here make it like this
see in ul i have added the templatedata
success:function(response){
data_response = JSON.parse(response)
var add_template = '';
for(var i = 0; i < data_response.length; i++){
// here this is creating list
add_template +=
'<li class="message-send-client">'+
'<div class="client-message-send">'+
'<div class="message-header-send">'+
'<img src='+data_response[i].line_image+'>'+
'</div>'+
'<div class="user-message">'+
'<label>'+data_response[i].line_name+'</label>'+
'<p>'+data_response[i].message+'</p>'+
'</div>'+
'</div>'+
'</li>'+
}
add_data = add_data +
'<div class="header-message" value='+data_response[0].line_name+'>'+
'<div class="image-profile">'+
'<img src='+data_response[0].line_image+' alt="image-message">'+
'</div>'+
'<div class="username-profile">'+
'<label>'+data_response[0].line_name+'</label>'+
'</div>'+
'<button id="btn-exit" onclick="exit_app()">X</button>'+
'</div>'+
'<div class="message-user">'+
'<ul>'+add_template+
'</ul>'+
'</div>'+
'<div class="footer-message-send">'+
'<div class="file-send">'+
'<label for="btn-file-input"><i class="fas fa-archive"></i></label>'+
'<button id="btn-file-input" style="display:none;"></button>'+
'<input type="file" id="file-input" style="display: none;">'+
'</div>'+
'<div class="send-message">'+
'<input type="text" name="yellow" class="textinput">'+
'</div>'+
'<div class="button-send">'+
'<label for="send-message-admini"><i class="fa fa-paper-plane" aria-hidden="true"></i></label>'+
'<button id="send-message-admini" style="display:none;" type="button" value="submit"></button>'+
'</div>'+
'</div>'
$(".chat-message").empty();
$(".chat-message").append(add_data);
}

dynamically Created html link does not work [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
After creating a batch of Html nodes, The link does not work!
How can I fix it?
Javascript Codes:
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
Exactly this line of code:
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>'
I expect this event to fire after clicking the tag that I have created dynamically.
But it doesn't work!
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
});

var collapseId = document.getElementById('collapseId')
var nnn = '<div class="media mt-3 w-100" id="commentNode_0000">' +
'<a class="pr-0" href = "#" >' +
'<img class="mr-3" src="/images/comment1.png" alt="x">' +
'</a>' +
'<div class="media-body w-100">' +
'<h5 class="mt-0 mb-1">User</h5>' +
'<div id="collapse_0000" class="">' +
'<div id="cardId_0000" class="card">' +
'<p>TEST TEST</p>' +
'</div>' +
'<div class="comment-meta" id="commentId_0000">' +
'<span><input id="deleteC_24_20" type="submit" class="submitLink" value="delete"></span>' +
'<span><input id="editC_24_20" type="submit" class="submitLink" value="edit"></span>' +
'<span>' +
'<a id="replyC_24_20" class="" role="button" data-toggle="collapse" href="#replyComment_0000" aria-expanded="false" aria-controls="collapseExample">reply</a>' +
'</span>' +
'<div id="replyComment_0000" class="collapse"></div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$(collapseId).append(nnn);
$("a[id^='replyC_']").on("click", function (event) {
var nodeId = event.target.id;
console.log(nodeId);
});
<div id="collapseId"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
it works fine :)

So more elements on page

I have 600 elements on page. When all element is loaded page doesen't have lags but after
Element
$.each(dishs, function(v, k){
$.each(k.dishs, function(v, dish){
if( check_criterion(dish.criterion_first, dish.criterion_second) && dish.price >= default_settings.min && dish.price <= default_settings.max && dish.name.toLowerCase().indexOf( default_settings.search ) + 1 )
show = ' style="display: block;" ';
else
show = ' style="display: none;" ';
html += '<form crit_2="' + dish.criterion_second + '" crit_1="' + dish.criterion_first + '" name="'+ dish.name +'" price="'+ dish.price +'" '+ show +' action="/order/" method="post" class="add_to_cart_close block col-md-4 col-sm-6 col-xs-12">';
html += '<input type="hidden" value="' + dish.id + '" />';
html += '<div class="item">';
html += '<div class="b-img" style="position: relative;">';
html += '<div style="position: absolute; width: 100%; top: 0px; left: -5px;">';
if(dish.criterion_first){
html += '<div class="ic criterion_' + dish.criterion_first + '" style="">';
html += '<img alt="" src="/static/img/ci' + dish.criterion_first + '.png" width="20px" height="20px">';
html += '<span>' + criterion_list["item" + dish.criterion_first ] + '</span>';
html += '</div>';
}
if(dish.criterion_second){
html += '<div class="ic criterion_' + dish.criterion_second + '" style="">';
html += '<img alt="" src="/static/img/ci' + dish.criterion_second + '.png" width="20px" height="20px">';
html += '<span>' + criterion_list["item" + dish.criterion_second ] + '</span>';
html += '</div>';
}
html += '</div>';
html += '<div class="img">';
if(!dish.image) {
html += '<div style="display: block; width: 100%; height: 170px; background-image: url(/static/img/no_image.png); background-position: 50%; background-size: cover;" ></div>';
} else {
html += '<div style="display: block; width: 100%; height: 170px; background-image: url(/media/' + dish.image + '); background-position: 50%; background-size: cover;" ></div>';
}
html += '</div>';
html += '<div class="slider-img">';
html += '<div class="slider">';
if(!dish.image_all.length) {
html += '<div class="slide">';
html += '<img data-toggle="modal" data-target="#modalPopup_' + dish.id + '" alt="" src="/static/img/no_image.png">';
html += '</div>';
} else {
$.each(dish.image_all, function(v, image ) {
html += '<div class="slide">';
html += '<a data-toggle="modal" data-target="#modalPopup_' + dish.id + '" href="#" onclick="return false;" style=" display: block; width: 100%; height: 276px; background-image: url(/media/'+ image +'); background-position: 50%; background-size: cover;" ></a>';
html += '</div>';
});
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="title">' + dish.name + '</div>';
if(dish.weight) {
html += '<div class="massa">' + dish.weight + '</div>';
}
html += '<div class="desc" style="height: 120px; overflow: hidden;">';
html += dish.description;
html += '</div>';
html += '<div class="bottom">';
html += '<div class="left">';
html += '<div class="cost"><span class="fix_price">' + dish.price + '</span> <span class="rub">a</span></div>';
html += '</div>';
html += '<div class="right">';
if(dish.supplements.length) {
html += '<input data-toggle="modal" data-target="#modalPopup_' + dish.id + '" type="submit" class="btn btn-default" value="ЗАКАЗАТЬ">';
} else {
html += '<input dish_id="' + dish.id + '" shop_id="' + dish.shop_id + '" type="submit" class="add_to_cart btn btn-default" value="ЗАКАЗАТЬ">';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</form>';
html += '<div class="modal fade product-modal bs-example-modal-lg" id="modalPopup_'+ dish.id +'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
html += '<div class="modal-dialog modal-lg" role="document">';
html += '<div class="modal-content">';
html += '<div class="modal-body">';
html += '<div class="row">';
html += '<!-- slider -->';
html += '<div class="col-sm-4">';
html += '<ul>';
$.each(dish.image_all, function(v, img){
html += '<li style="width: 270px;"><img src="/media/'+ img +'" /></li>';
});
html += '</ul>';
html += '<div class="slider">';
html += '<div class="icons">';
html += '<span class="likes"><span class="icon glyphicon glyphicon-heart"></span> 4,8</span>';
html += '<span class="expert-count"><img src="/static/img/expert.png" width="22px"> 3</span>';
html += '<span class="reviews-count"><img src="/static/img/speach.png" width="20px"> 5</span>';
html += '</div>';
html += '<div class="reward">';
html += '<span class="rewi1"><img src="/static/img/ico/i1.png" width="20px"> Блюдо без мяса</span>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<!-- / slider -->';
html += '<div class="info-product col-sm-8">';
html += '<div class="headline">' +dish.name + '</div>';
html += '<div class="product-value">Вес '+ dish.weight + ' </div>';
html += '<div class="product-description">';
html += '<p style=" overflow: hidden;padding: 5px; text-overflow: ellipsis;" >';
html += dish.description;
html += '</p>';
html += '</div>';
if(dish.criterion_first || dish.criterion_second) {
html += '<div class="product-composition"><b>Состав:</b>';
if(dish.criterion_first) {
html += criterion_list[dish.criterion_first];
}
if(dish.criterion_second)
{
html += criterion_list[dish.criterion_second];
}
html += '</div>';
}
html += '<div class="supplements">'
if(dish.supplements.length) {
html += '<div class="row">';
html += '<div class="title">Добавки:</div>';
$.each(dish.supplements, function(v, supp){
html += '<div class="row-check col-sm-6">';
html += '<input price="'+ supp.price + '" class="supplement_price" value="'+ supp.id +'" type="checkbox">';
html += '<label>';
html += '<span class="name">';
html += supp.name;
html += '</span>';
html += '<span class="text-right price-plus fix_price">';
html += supp.price;
html += '</span> р.';
html += '</label>';
html += '</div>';
});
html += '</div>';
}
html += '<div class="total-price">';
html += '<div class="col-sm-12 line"></div>';
html += '<div class="row">';
html += '<!--<div class="col-sm-4 col-xs-6">Цена:</div>';
html += '<div class="col-sm-8 text-right" style="margin: 0 0 10px 0;">';
html += '<span class="fix_price">'+ dish.price +'</span><span> р.</span></div>-->';
html += '<div class="col-sm-4 col-xs-6">Цена:</div>';
html += '<div class="col-sm-8 text-right">';
html += '<span class="fix_price supplement_total_price" price="' + dish.price + '" >';
html += dish.price;
html += '</span>';
html += '<span style="margin-right: 50px"> р.</span>';
html += '<button shop_id="' + dish.shop_id + '" dish_id="' + dish.id + '" data-dismiss="modal" class="add_to_cart btn btn-btn-cart">Заказать</button>';
html += '</div>';
if($('#user').val()) {
var display = 'block';
if(dish.favsdish) var display = 'none;';
var dis_fav = 'none';
if(dish.favsdish) var display = 'block';
html += '<div class="col-sm-4 col-xs-6"> </div>';
html += '<div class="col-sm-8 text-right" dish_id="' + dish.id + '" style="margin: 10px 0;">';
html += '<button dish_id="' + dish.id + '" style="margin-left: auto; cursor: pointer; display:' + display + ' " class="add_to_favs btn btn-btn-cart" >В избранное</button>';
html += '<button dish_id="' + dish.id + '" style="margin-left: auto; cursor: pointer; display: '+ dis_fav +'" class="remove_from_favs btn btn-btn-cart" >Убрать из избранного</button>';
html += '</div>';
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<!--';
html += '<div class="row">';
html += '<div class="complete-product">';
html += '<div class="headline col-sm-12">Это блюдо входит в обед:</div>';
html += '<div class="item col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Суп "Кокетка"</div>';
html += '</div>';
html += '<div class="item col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Грибочки "А ля рус"</div>';
html += '</div>';
html += '<div class="item last col-md-3 col-xs-4 col-sm-3">';
html += '<div class="image"><img src="img/slide.png" alt="" class="img-responsive"></div>';
html += '<div class="name">Мохнатое мороженое</div>';
html += '</div>';
html += '<div class="product-cart col-md-3 col-xs-12 col-sm-3 text-right">';
html += '<span class="price">345 р.</span><button class="btn btn-cart">Заказать обед</button>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '-->';
html += '<div class="expert">';
html += '<div class="headline">Мнение эксперта</div>';
html += '<div class="row">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '<div class="show-more">Показать больше ответов экспертов</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<div class="expert reviews">';
html += '<div class="headline">Отзывы о блюде (7)</div>';
html += '<!-- item -->';
html += '<div class="row item">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '</div>';
html += '</div>';
html += '<!-- / item -->';
html += '<!-- item -->';
html += '<div class="row item">';
html += '<div class="image col-lg-3 col-sm-3 col-md-3 col-xs-3">';
html += '<img src="/static/img/rev1.png" alt="">';
html += '<div class="icons">';
html += '<div class="likes text-center"><span class="icon glyphicon glyphicon-heart"></span> 4,9</div>';
html += '</div>';
html += '</div>';
html += '<div class="info col-lg-9 col-sm-9 col-md-9 col-xs-9">';
html += '<div class="name">Владислав Фенечкин, эксперт с 11 летним стажем</div>';
html += '<div class="text">Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе. Очень тонко и необычно подобраны имена в прототипе.</div>';
html += '</div>';
html += '</div>';
html += '<!-- / item -->';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
});
$('#menu_' + k.sm).next().html(html);
html = '';
check_visible_catalogs();
});
I generate in from AJAX data: than i insert it on page
Got function Show and hide elements So: i try show and hide 600 elements
$('[id^="menu_"]').hide();
$('[id^="menu_"]').next().hide();
And Than:
$('[id^="menu_"]').show();
$('[id^="menu_"]').next().show();
$('[id^="menu_"]').next().children().show();
I Got so strong lags....
How i can fix that lags?

cildren() return not first level elements In 600 element i have `3200 childrens

Escaping Quotes does not work in JavaScript innerHTML

I have got a quite bad "quoting situation" at the moment.
I am working inside an innerHTML and inside this i want to call a function on the onClick-Event, which leaves me with the following:
modalEl.innerHTML = '<form>'+
'<legend>Gruppe bearbeiten</legend>'+
'<div class="mui-textfield">'+
'<input id="groupName" type="text" value="'+name+'">'+
'<label>Gruppenname</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
'<label>Beschreibung</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<label>Geräte hinzufügen</label>'+
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
'<option value="0"></option>'+
'</select>'+
'</div>'+
'<br>'+
'<div class="outterformbuttons">'+
'<div class="formbuttons">'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById("groupName").value, document.getElementById("groupDesc").value)">Speichern</button>'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
'</div>'+
'</div>'+
'</form>';
I already tried escaping the quotes and using HTML-Quotes, but neither worked.

Instead of HTML encoding the single quotes, just JavaString escape your single quotes.
'<button type="button" class="mui-btn mui-btn--raised"
onclick="sendUpdatedGroup(id, document.getElementById(\'groupName\').value,
document.getElementById(\'groupDesc\').value)">Speichern</button>'+
If you don't want to get into escaping hell , don't use event handlers as HTML attributes (which we stopped doing about 10 years ago).
modalEl.innerHTML = '<form>'+
'<legend>Gruppe bearbeiten</legend>'+
'<div class="mui-textfield">'+
'<input id="groupName" type="text" value="'+name+'">'+
'<label>Gruppenname</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
'<label>Beschreibung</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<label>Geräte hinzufügen</label>'+
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
'<option value="0"></option>'+
'</select>'+
'</div>'+
'<br>'+
'<div class="outterformbuttons">'+
'<div class="formbuttons">'+
'<button type="button" class="mui-btn mui-btn--raised" >Speichern</button>'+
'<button type="button" class="mui-btn mui-btn--raised">Abbrechen</button>'+
'</div>'+
'</div>'+
'</form>';
var buttons = modalEl.querySelectorAll('.formbuttons button');
buttons[0].addEventListener('click', function() {
sendUpdatedGroup(id,
document.getElementById('groupName').value,
document.getElementById('groupDesc').value))
});
buttons[i].addEventListener('click', deactivateOverlay);

You forgot to declare desc and name look at this fiddle totally works https://jsfiddle.net/L3Lfweh9/
HTML
<div id="message">
</div>
<button id="bttn">
click here
</button>
JS
var name = "one";
var desc = "two";
var text = '<form>'+
'<legend>Gruppe bearbeiten</legend>'+
'<div class="mui-textfield">'+
'<input id="groupName" type="text" value="'+name+'">'+
'<label>Gruppenname</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<textarea id="groupDesc" placeholder="">'+desc+'</textarea>'+
'<label>Beschreibung</label>'+
'</div>'+
'<br/>'+
'<div class="mui-textfield">'+
'<label>Geräte hinzufügen</label>'+
'<select id="devicetable" data-placeholder="ID und/oder Namen eingeben" class="chosen-select" multiple style="width:350px;" tabindex="4">'+
'<option value="0"></option>'+
'</select>'+
'</div>'+
'<br>'+
'<div class="outterformbuttons">'+
'<div class="formbuttons">'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="sendUpdatedGroup(id, document.getElementById("groupName").value, document.getElementById("groupDesc").value)">Speichern</button>'+
'<button type="button" class="mui-btn mui-btn--raised" onclick="deactivateOverlay()">Abbrechen</button>'+
'</div>'+
'</div>'+
'</form>';
document.getElementById("bttn").addEventListener("click", function(){
document.getElementById("message").innerHTML = text;
}, false);

Removing Element from String Template

I have a JavaScript string called _categoryItemDivTemplate that defines HTML markup, including a <div> with class="MakeTopLevelCategory".
I thought I can remove that <div> with the following code:
item = $(_categoryItemDivTemplate);
if (!isTopLevel)
item.remove('div.MakeTopLevelCategory');
But it has no effect.
Am I missing something? Is it necessary to first add the item to the DOM?
EDIT:
Here's the template from the code:
var _categoryItemDivTemplate =
'<div class="CategoryItem" style="clear:both;">'
+ '<div class="CategoryHeader">'
+ '<img src="/images/plus.gif" class="Icon"/>'
+ '<img src="/images/icn_folder.gif" class="Icon"/>'
+ '<span class="Title"> </span>'
+ '<div style="float:right; font-size: 11px;" class="CategorySelector">'
+ '<div class="DeleteCategory" title="Delete this Category"> </div>'
+ '<div class="EditCategory" title="Rename this Category"> </div>'
+ '<div class="MakeTopLevelCategory" title="Make this Category a Top-level Category">&nbsp</div>'
+ '<div class="MoveSubcategory" title="Move this Category"> </div>'
+ '<div class="SubcategoryMarker AddSubcategory" title="Add a new Subcategory to this Category"> </div>'
+ '<div class="PackageCostingMarker AddPackage" title="Add a new Package to this Category"> </div>'
+ '<div class="ProductCostingMarker AddProduct" title="Add a new Product to this Category"> </div>'
+ '<div class="NarrativeMarker AddArticle" title="Add a new Article to this Category"> </div>'
+ '</div>'
+ '</div>'
+ '<div class="CategoryItems" style="display: none;">'
+ '</div>'
+ '</div>';

Removing it from the object does not removes it from the string, if you want to remove it from the string then you need to replace the string with the object sources so try
item = $('<div />', {html:'_categoryItemDivTemplate'});
if (!isTopLevel) {
item.find('div.MakeTopLevelCategory').remove();
}