Попытка удалить html-элементы из селектора без изменения DOM

Question

Я пытаюсь сохранить html, содержащийся в идентификаторе DIV: #canvas. Удаление всех элементов с классами: .show-hide-config и .ez-control, прежде чем отправить его через ajax на сервер. Вот что у меня есть, но это далеко не работает.

$(".ez-save-page").click(function(){ 
    var canvas_html = $("#canvas").html(); 
    canvas_html = $(canvas_html).find(".show-hide-config, .ez-control").remove(); 
    $.ajax({ 
     dataType: "json", 
     url: "./save_page/", 
     data: {"save_html": JSON.stringify(canvas_html)}, 
     success: function(save_result){ 
      console.log(save_result); 
     } 
    }); 
}); 

Пример HTML:

<div id="el-1387177861244" class="ui-draggable"> 
    <button class="show-hide-config">×</button> 
    <div class="ez-control"> 
     <span>Container</span> 
     <div class="config_options"> 
      <div class="btn-group"> 
       <button type="button" class="close">×</button> 
      </div> 
     </div> 
     <div class="clearfix"></div> 
    </div> 
    <div> 
     <p>Some content I want to keep including the wrapping div</p> 
    </div> 
</div> 

То, что я хочу быть отправлено:

<div id="el-1387177861244" class="ui-draggable"> 
    <div> 
     <p>Some content I want to keep including the wrapping div</p> 
    </div> 
</div> 

Действительное HTML далеко mnore сложным и может иметь любое количество элементов внутри, но если я могу удалите 2 класса из селектора, не изменяя DOM, это было бы высоко оценено.

Answer 1

Вы можете клонировать содержимое #canvas, управлять ими так, как вы хотите, и получить полученный HTML-код. Пересмотренный код:

var canvas_html = $("#canvas") 
    .children()        // grab .children 
    .clone()        // and .clone 
    .find(".show-hide-config, .ez-control") // .find unwanted elements 
    .remove()        // .remove them 
    .end()         // undo the last .find operation 
    .html();        // grab .html contents 
console.log($.trim(canvas_html)); 
// <div> 
//  <p>Some content I want to keep including the wrapping div</p> 
// </div> 

Answer 2

попробовать это

$("#canvas").find(".show-hide-config, .ez-control").remove(); 

вместо

canvas_html = $(canvas_html).find(".show-hide-config, .ez-control").remove();