根据内部值切换p标签的显示

Question

我认为这应该不太难解决，但是对于Javascript或JQuery，我几乎是一个新手。

HTML：

<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>

当客户未填写地址行2时，仍然存在值"," ，因此在摘要页面中，它看起来像这样：

12 Bob Street,
,
BOLTON,
Lancashire,
BL1 1AC

因此<p><span id="AddLine2Summary"></span>,</p>当客户将此空白留空时，我试图消除整行<p><span id="AddLine2Summary"></span>,</p> 。 到目前为止，我已经尝试过了：

<script>
$(document).ready(function () {

if ($('#AddLine2Summary:contains(",")').length == 1) {
    $("#AddLine2Summary").parent().hide();
}

});
</script>

parent.hide因为我必须隐藏整个<p>而不仅仅是<span>

Answer 1

除了检查“。”的长度外，您还可以检查跨度内具有ID AddLine2Summary的文本。 如果为空，则可以放置隐藏父代的代码。

它应该看起来像：

if ($('#AddLine2Summary').is(':empty')) {
    $("#AddLine2Summary").parent().hide();
}

Answer 2

首先，尝试将HTML代码段包装在容器中，以使选择更加容易：

<div class="address-container">
    <p><span id="AddLine1Summary"></span>,</p>
    <p><span id="AddLine2Summary"></span>,</p>
    <p><span id="TownCitySummary"></span>,</p>
    <p><span id="CountySummary"></span>,</p>
    <p><span id="PostcodeSummary"></span></p>
</div>

然后在jQuery中，在此处查找空的span元素，并隐藏其父p 。

$('.address-container span:empty').closest('p').hide();

小提琴的例子

然后，这将适用于所有空地址字段，而不仅仅是#AddLine2Summary 。