манипулировать HTML, прежде чем добавить в DOM

Question

$(document).ready(function(){ 
 
    var x = '<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>'; 
 
    console.log($(x).find('#container').get(0)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Я могу получить блок контейнера, но как удалить .target span?

Answer 1

Попробуйте следующее:

$(x).find(".target").remove(); 

Answer 2

Вы можете попробовать это

$ (х) .find ("span.target");

Answer 3

Вы хотите удалить весь элемент, если class соответствует .target? Попробуйте это:

$(document).ready(function(){ 
    var x = $('<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>'); 
    x.find('.target').get(0).remove(); 
    console.log(x.html()); 
}); 

Вот fiddle.

---

Редактировать

As x.html() срывает корневого элемента (т.е. <div></div>), вот решение, если вы хотите, чтобы получить полный HTML строку.

$(document).ready(function(){ 
    var x = $('<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>'); 
    x.find('.target').get(0).remove(); 
    x = x.wrap('<div>').parent().html(); 
    console.log(x); 
}); 

Обновлено fiddle.

---

Edit 2

В том случае, когда есть более одного .target, скажем, например, следующую строку:

<div><span></span><div id="container"><span>one</span><span class="target"></span><span class="target"></span><i class="target"></i></div></div>

Вы можете рассмотреть вопрос о снятии get(0).

$(document).ready(function(){ 
    var x = $('<div><span></span><div id="container"><span>one</span><span class="target"></span><span class="target"></span><i class="target"></i></div></div>'); 
    x.find('.target').remove(); 
    x = x.wrap('<div>').parent().html(); 
    console.log(x); 
}); 

Обновлено fiddle.

Answer 4

См. Ниже.

FYI - нет пядь внутри элемента с классом цели ... так что делать '.TARGET пролет' своего рода не имеет смысла

var x = '<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>'; 

var elem = $(x).find("#container").parent(); 
elem.find('.target').remove(); 

Answer 5

Try:

var x = '<div><span></span><div id="container"><span>one</span><span class="target"></span></div></div>'; 

var elem = $(x).find("#container").parent(); 
elem.find('.target').remove(); 
var div = $('<div>').append(elem).html(); 
console.log(div); 

http://jsfiddle.net/8dh3bze7/

Answer 6

Это должно работать:

$(document).ready(function() { 
    var x = '<div><span></span><div id="container"><span>one</span><span id="target">ssss</span></div></div>'; 
    var y = $(x).find("#target").remove().text(); 
    //$(x).find(".target").remove(); 

    $('#new').append("<p>Test</p>" + y); 
});