jQuery: удаление HTML-элемента при сохранении его потомков

Question

Я хочу добавить HTML так:

<div><img src="item.png"/>&nbsp;<a href="#"><span>Hello</span></a></div>

но в некоторых случаях мне нужно избавиться от обертывающего a-элемента, поэтому он выглядит так:

<div><img src="item.png"/>&nbsp;<span>Hello</span></div>

Этот a-элемент может находиться где угодно в произвольных HTML-фрагментах. Я хватаю его за [href = "#"]. Этот HTML не является частью DOM, он добавляется в DOM после удаления a-элемента.

Я ходил во все виды предложений, которые предлагает jQuery, но не смог. Моя главная проблема в том, что, кажется, нет никакого способа применить селектор к HTML, созданному jQuery следующим образом:

$("html code from above");

Я пытался заменить a-элемент внутренним HTML, но все мои конструкции с find () и replaceWith () завершаются ошибкой, в основном остается только <span>Hello</span>: (

Как jQuery-pro решает эту проблему?

Answer 1

Не будет ли функция развернуть делать то, что вы хотите?

Если вы просто хотите удалить окружающий тег (например, привязку)

Answer 2

Что вам нужно сделать, это установить контекст вашего селектора. Смотрите эту ссылку: http://api.jquery.com/jquery/#selector-context

В вашем случае, когда вы делаете выбор для замены ссылки, задайте контекст как HTML-фрагмент, который вы изменяете. Вот пример:

$(function() {
    //create snippet
    var mySnippet = $('<div><img src="item.png"/>&nbsp;<a href="#"><span>Hello</span></a></div>');

    //remove the link, using the snippet as the context
    $('a[href="#"]', mySnippet).replaceWith($('a[href="#"]', mySnippet).html());

    //insert the modified snippet
    $('body').append(mySnippet);
});

И вот демонстрация этого в действии (не очень захватывающе, но показывает, что это работает): http://jsfiddle.net/Ender/dQ32B/