CODEWITHSUNDEEP
jquery
user8758206
user8758206

Reputation: 2191

jQuery function is not a function - how?

I'm relatively new to jQuery and am trying to write a function that removes all empty p tags, span tags, strong tags and p and span tags containing only ' '. I've managed to successfully write it but only in a very 'wet' way:

$('p').filter(function() {
 return ($(this).html().trim() == ' ');
}).remove();
$('span').filter(function() {
 return ($(this).html().trim() == ' ');
}).remove();
$('span').filter(function() {
 return ($(this).html().trim() == '');
}).remove();
$('strong').filter(function() {
 return ($(this).html().trim() == '');
}).remove();
$('p').filter(function() {
 return ($(this).html().trim() == '');
}).remove();

This is the code it plays with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
<p>text</p>
<p>&nbsp;</p>
<p>text</p>
<p><span>text</span></p>
<p><span></span></p>
<p>text</p>
<p></p>
<p>&nbsp;</p>
<p>text</p>
<p>&nbsp;</p>
<p><span>text</span></p>
<p></p>
<p><span></span></p>
<p>text</p>
</div>

I've tried to rewrite the code by using a function below, but fails, telling me '$(...).clean is not a function':

function clean() {
    return $(this).filter(function() {
 return ($(this).html().trim() == '&nbsp;');
}).remove();
}
$('p').clean();
$('span').clean();

Other similar posts suggested adding (jQuery);, but this has not worked either.

Can someone explain what I'm doing wrong here, and how to fix it? Or is there an even drier solution for this? I'd rather write fewer lines of code. Also, quick question - when a function is inside another function as above, can 2 return statements be used, or only 1? Thanks for any help here.

Upvotes: 0

Views: 235

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370759

In order to call a custom function on a jQuery object, you should assign the function to $.fn.<fnName>:

$.fn.clean = function() {
  return $(this).filter(function() {
    return ($(this).html().trim() == '&nbsp;');
  }).remove();
}
$('p').clean();
$('span').clean();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
  <p>text</p>
  <p>&nbsp;</p>
  <p>text</p>
  <p><span>text</span></p>
  <p><span></span></p>
  <p>text</p>
  <p></p>
  <p>&nbsp;</p>
  <p>text</p>
  <p>&nbsp;</p>
  <p><span>text</span></p>
  <p></p>
  <p><span></span></p>
  <p>text</p>
</div>

A standalone function declaration like

function clean(arg) {

will only be invokable via syntax like

clean(arg)

without anything before clean. You could pass clean as a callback to each:

function clean() {
  return $(this).filter(function() {
    return ($(this).html().trim() == '&nbsp;');
  }).remove();
}
$('p').each(clean);
$('span').each(clean);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
  <p>text</p>
  <p>&nbsp;</p>
  <p>text</p>
  <p><span>text</span></p>
  <p><span></span></p>
  <p>text</p>
  <p></p>
  <p>&nbsp;</p>
  <p>text</p>
  <p>&nbsp;</p>
  <p><span>text</span></p>
  <p></p>
  <p><span></span></p>
  <p>text</p>
</div>

or, by calling clean in the callback instead of passing clean as the callback:

function clean(element) {
  return $(element).filter(function() {
    return ($(this).html().trim() == '&nbsp;');
  }).remove();
}
$('p').each(function() {
  clean(this);
});
$('span').each(function() {
  clean(this)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'>
  <p>text</p>
  <p>&nbsp;</p>
  <p>text</p>
  <p><span>text</span></p>
  <p><span></span></p>
  <p>text</p>
  <p></p>
  <p>&nbsp;</p>
  <p>text</p>
  <p>&nbsp;</p>
  <p><span>text</span></p>
  <p></p>
  <p><span></span></p>
  <p>text</p>
</div>

Upvotes: 9

Related Questions