尝试从选择器中删除html元素而不修改DOM

Question

我正在尝试保存DIV ID #canvas包含的html。 删除所有带有类的元素： .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复杂得多，内部可以有任意多个元素，但是如果我可以从选择器中删除2个类而不修改DOM，将不胜感激。

Answer 1

您可以克隆#canvas的内容，以#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();