Hide parent element if img src = null

Question

I would like to hide the td containing the image if the image src inside of the td is null.

I tried the following, but it would hide more than just the td i was trying to target:

$('td').each(function() {
    if($(this).find('img').attr('src') == "null"){
        $(this).css('display', 'none');
    }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <p class="centered">
          <label class="wrapable">
          <img src="null">
          <input name="test" value="1" type="radio">
          </label>
        </p>
      </td>
      <td>
        <p class="centered">
          <label class="wrapable">
          <img src="null">
          <input name="test" value="1" type="radio">
          </label>
        </p>
      </td>
      <td>
        <p class="centered">
          <label class="wrapable">
          <img src="null">
          <input name="test" value="1" type="radio">
          </label>
        </p>
      </td>
      <td>
        <p class="centered">
          <label class="wrapable">
          <img src="http://lorempixel.com/100/100">
          <input name="test" value="1" type="radio">
          </label>
        </p>
      </td>
    </tr>
  <tbody>
</table>

Any help would be greatly appreciated, still learning :)

"it would hide more than just the td i was trying to target:" . What else it does it hide, then? It looks to me like it should work. — ADyson, Feb 28 '17 at 15:10
Note that you can simplify it in `$('img[src="null"]').closest("td").hide();` — Denys Séguret, Feb 28 '17 at 15:11
this table is nested inside of another table, so it hides the containing td as well. — Jenny, Feb 28 '17 at 15:12
Then use Denys' suggestion; also: why wasn't that detail in the question? Could you [edit] to include it, as it's definitely relevant to the problem. — David Thomas, Feb 28 '17 at 15:13
Ugh, no you are right it works. My eyes are playing tricks on me, thanks. And thanks for the truncated version!! — Jenny, Feb 28 '17 at 15:14
Possible duplicate of [How to silently hide "Image not found" icon when src source image is not found](http://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found) — Pietro, Feb 28 '17 at 15:21

score 3 · Answer 1 · answered Feb 28 '17 at 15:12

3

The simplest solution using jQuery:

$('td:has(img[src="null"])').hide();

or slightly faster:

$('td').has('img[src="null"]').hide();

answered Feb 28 '17 at 15:12

niutech

28,923
15
96
106

1

could you elaborate a bit as to why the second version is supposed to be faster? – garglblarg Feb 28 '17 at 15:20
1

@garglblarg It uses the native `querySelectorAll` method to find `td`, as opposed to the custom `:has()` selector, which is not supported natively. – niutech Feb 28 '17 at 15:21

score 1 · Answer 2 · answered Feb 28 '17 at 15:15

1

You could also try with this

<img onerror="this.parent.style.display='none'" src=".." />

answered Feb 28 '17 at 15:15

Pietro

988
10
19

newstockie · Accepted Answer · 2017-03-01T15:14:47.987

1

Should be a short line like this: $('img[src="null"]').parents('td:first').hide();

If need to target all of the parent td ancestors $('img[src="null"]').parents('td').hide(); remove pseudo :first selector,

edited Mar 01 '17 at 15:14

answered Feb 28 '17 at 15:21

newstockie

114
1
4

`parents`, not `parent`. Fixed for you. – niutech Feb 28 '17 at 15:23
1

Hi niutech it's should be 'parent' in order to hide the right and immediate mother td, the 'parents' will hide every td elements that owns this img . If this whole table were inside a 'td', will hide entire table, which is not intended in this question it seems. gonna change back parent. – newstockie Feb 28 '17 at 15:53
In the code provided above `` is inside ``, not `` and `parent()` looks only one level up the DOM. – niutech Feb 28 '17 at 16:25
1

Hi niutech I checked to be u you are right, anyway, if 'parents' is used must use :first pseudo selector in order to hide only immediate td parent. – newstockie Mar 01 '17 at 15:17

Hide parent element if img src = null

3 Answers3