Question

我对jQuery不是很好，我需要你的帮助。首先，让我解释一下情况。我有一个像这样的HTML表：

<table id="table">
<tr><td><img class="image" />test</td><td></td></tr>
<tr><td><img class="image" />test</td><td></td></tr>
</table>

我需要做的是获取表格的全部内容：$（“＃table”）。html（）但没有img标签。（但我不想在原始内容中删除它们，只能在“复制”内容中删除它们）

我尝试过这样的事情： $('#table').clone().find('.image').remove().parent().parent().html()

但是它是未定义的（我想当元素被删除时，我无法访问它并获得父元素）。你会怎么做？

由于

编辑：为了更好地解释它，我需要的结果是：

<table id="table">
<tr><td>test</td><td></td></tr>
<tr><td>test</td><td></td></tr>
</table>

Answer 1

$('#report').clone().find('.plusImage').remove().html()不会返回表格的内容。

// First clone table and save it to a new variable
var clonedTable = $('#table').clone();

// remove all img tags
clonedTable.find('img').remove();

// test it
console.log(clonedTable.html());

您还可以使用正则表达式将其从字符串中删除而不克隆DOM：

var contentWithoutImg = $('#table').html().replace(/<img[^>]+\>/ig, '');
console.log(contentWithoutImg);

Answer 2

您无法将表的方法链接到remove()，因为它会返回已删除的元素。 Hast has posted the proper answer，但如果您认为自己需要的不仅仅是一次，而且想要创建自己的方法来删除子项并返回容器，则可以使用以下命令：

$.fn.removeDesc = function(sel){
    return this.each(function(){
       $(this).find(sel).remove(); 
    });
}

然后您可以这样使用它：

var tableHTML = $('#report').clone().removeDesc('.plusImage').html();

JSFiddle

如何删除子项并获取父项

2 个答案: