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 будет числом.

Я попробовал следующее: Сделал JSFiddle с кодом ниже

 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] или просто первым текстом «что-то» без html.

JQuery, удаляем элемент из строки

Строка в объект jQuery, как удалить элементы

Удалить элемент из строки html в 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/

Answer 2

Проверьте эту скрипку: http://jsfiddle.net/ZDdWV/

В основном добавлен обертка вокруг вашего HTML-текста, чтобы заставить .find () работать (он работает на узлах в элементе вызывающей стороны)