'Using jquery, how do I loop through, see if a field is empty, then hide, the whole row of that empty field

So I don't have a "what have you tried" because I don't even know how to start. I have google'd around and I think I am just not asking the question correctly. So I have a mass of output that I need to tweak starting with hiding some of these redundant rows - see code below

<div class="contextual-region view view-regional-doctor-information view-id-regional-doctor-information view-display-id-block_1 js-view-dom-id-jkjdfjsdlfjlsdkfksjdf98sdfslkjdflk2lkjsldj">
  
    <div data-contextual-id="entity.view.edit_form:view=regional-doctor-information:location=block&amp;name=regional-doctor-information&amp;display_id=block_1&amp;langcode=en" data-contextual-token="3otUgVBoS04lVeROYZIoEv_Z9hW4IGphSUd3Eki1Sok" data-once="contextual-render" class="contextual"><button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button><ul class="contextual-links" hidden=""><li class="entityviewedit-form"><a href="/admin/structure/views/view/regional_doctor_information/edit/block_1?destination=/node/133">Edit view</a></li></ul></div>
      
      <div class="view-content">
          <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 01/31/2022 - 17:14</span></span> | <span class="views-field views-field-title"><span class="field-content">Landing Page for Doctor TA - Demo</span></span><span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content"></span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 02/14/2022 - 19:47</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span><span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content"></span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Tue, 02/15/2022 - 01:28</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span><span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content"></span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Tue, 02/15/2022 - 23:49</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span><span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content"></span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Sat, 02/19/2022 - 23:48</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span><span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content"></span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
     <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Wed, 03/16/2022 - 14:55</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span><span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content"></span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 04/18/2022 - 15:45</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Melvin Douglas, MD</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 04/18/2022 - 23:07</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Melvin Douglas, MD</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 04/18/2022 - 23:14</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Melvin Douglas, MD</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 04/18/2022 - 23:14</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Melvin Douglas, MD</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Mon, 04/18/2022 - 23:46</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Melvin Douglas, MD</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Tue, 04/26/2022 - 17:39</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Melvin Douglas, MD</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>
    <div class="views-row doctor-views-row-cls"><span class="views-field views-field-changed"><span class="field-content">Wed, 05/04/2022 - 23:02</span></span> | <span class="views-field views-field-title"><span class="field-content">Doctor</span></span> | <span class="views-field views-field-field-regional-doctor-2-revision-id"><span class="field-content">Fred Edora</span></span> | <span class="views-field views-field-field-regional-doctor-2"><span class="field-content">Patrick Wallace, MD</span></span><div class="views-field views-field-field-position"><div class="field-content"></div></div></div>

    </div>
  
          </div>

this is a bunch of history data, for example, all those initial rows with Patrick Wallace, are just where people were saving over and over with no real changes, but it appears in the history. There are issues getting to the db, so I want to use jQuery to make some changes for an upcoming demo

This is what I want to attempt -

  1. look in each .doctor-views-row-cls
  2. then look at the .views-field-field-position class (this is a child w/i .doctor-views-row-cls)
  3. if it's associated .field-content class is empty, hide the .doctor-views-row-cls ROW

maybe this is better way to say it, how do I loop through and delete/hide an entire row if one of it's classes is empty/has no value

how can I achieve this using jQuery?

jquery


Solution 1:[1]

This can be done like so ...

Loop through the outer records

This is step 1 look in each .doctor-views-row-cls

function makeCheck() {
  $targets = $('.doctor-views-row-cls');
  
  $targets.each(function() {
    // this will hide the row if the div is empty or show the row if it is not empty
    $(this).toggle(!checkFieldPositionEl($(this)));
  });
}

Check the element .views-field-field-position

This is step 2 then look at the .views-field-field-position class (this is a child w/i .doctor-views-row-cls)

function checkFieldPositionEl(parent) {
  let $target = parent.find('.views-field-field-position');
  return checkFieldContentClass($target);
}

Check if ".field-content" class is empty

This is step 3 if it's associated .field-content class is empty, hide the .doctor-views-row-cls ROW

function checkFieldContentClass(parent) {
  let $target = parent.find('.field-content');
  return $target.is(':empty');
}

Call the makeCheck method to run the functionality

makeCheck();

I've put this in an example pen here;

https://codepen.io/bjkippax/pen/XWZXpRG

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Benjamin James Kippax

Related Questions