在附加到DOM之前操作html

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

如果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());
});

这是一个小提琴 。

---

编辑

由于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);
});

更新小提琴 。

---

编辑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);
});

再次更新了小提琴 。

Answer 2

请尝试以下操作：

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

Answer 3

你可以试试这个

$（x）.find（“ span.target”）;

Answer 4

见下文。

仅供参考 -目标类的元素内部没有跨度...所以执行'.target span'有点没有意义

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

尝试：

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);
});