JQuery，从 Html 字符串中删除元素并以 HTML 形式放回文本区域

Question

我有一个文本区域，用户可以在其中编辑一些文本，并且它接受 HTML。在系统中，我们可以在文本区域中添加要添加的多媒体文件。但是，当有人取消链接多媒体时，我需要检查文本区域中是否有任何多媒体，将其删除并放回文本区域。

所以: 我有一个像这样的文本区域

<textarea id="edNew-body" class="apply-jHtmlArea" style="width:550px;height:250px;"></textarea>`

当我添加一些多媒体时，它会像这样，例如:

<audio src="whatever url" controls="controls" class="multimedia_666007" style="display: block; margin: 5px auto 10px; width: 320px; height: 35px; background-color: rgb(227, 227, 227);">-AUDIO-No support for HTML5</audio>`

因此，当我删除多媒体时，我需要获取文本区域内的所有 html 并使用 class=multimedia_NNNNN 删除所有元素，其中 NNNN 是一个数字。

我尝试了以下操作:Made a JSFiddle with below code

 dataId = '666007'; //not fixed, will come from somewhere from system
 var $currentHtml = $($("#edNew-body.apply-jHtmlArea").val());
 $currentHtml.find('.multimedia_'+dataId).remove(); //get all but ignore elements with this class
 $("#edNew-body.apply-jHtmlArea").val($currentHtml.html()); //put Html back without elements

我已经尝试了下面这些问题的答案，但它们只适用于这些问题。当我尝试适应时，我总是以 [object Object] 结尾，或者只是第一个文本“something”，没有任何 html。

JQuery, remove element from string

String to jQuery object, how to remove elements

Remove element from html string in JQuery

阅读答案后我了解到我需要使用 find 因为它是用户输入，它可以嵌套也可以不嵌套在某些内容中(所以我不能使用 remove('.classhere'))

Answer 1

如果将 HTML 放入容器中，则 .find() 将能够搜索所有元素(因为它从不查看顶层元素)。

此外，由于 .html() 仅提供嵌套的 HTML 内容，因此将其放入容器中将允许 .html() 返回整个修改后的 HTML内容。

$('#rmv').click(function(e){
    e.preventDefault();
    var dataId = '666007'; 

      // Put the markup in a new container
    var $currentHtml = $('<div>').append($("#edNew-body.apply-jHtmlArea").val());

      // .find() will now be able to search through all the markup you added
    $currentHtml.find('.multimedia_'+dataId).remove();

      // .html() will now give you back all the markup (though modified)
    $("#edNew-body.apply-jHtmlArea").val($currentHtml.html()); 
});

http://jsfiddle.net/jR5bc/