jquery empty - remove html tag if no contents

Question

jquery empty - remove html tag if no contents

How to remove html tag if it does not contain text or content.

if using <p></p> code is working, but if using

<p>

</p>

The code is not successful

jquery

$(document).ready(function(){
    $("button").click(function(){
        $('#demo p:empty').remove();
    });
});

html

<p>

</p>
==================================

$(document).ready(function(){
    $("button").click(function(){
		$('#demo p:empty').remove();
    });
});

  p {
    background:red;
    color:white;
    height:20px;
  }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
</head> 
<body>
  
<button>Run</button>	
<div id='demo'>
  <p>
  
  </p>
  <p>
    Lorem Ipsum .....
  </p>
</div>

</body>
</html>

Thank you in advance

Just remove space from your <p> tag or before removing trim the value. — suyesh
– suyesh, Commented Mar 10, 2017 at 4:10

guradio · Accepted Answer · 2017-03-10 04:08:15Z

4

$(document).ready(function() {
  $("button").click(function() {
    $('#demo p').filter(function() {
      return $(this).html().trim().length == 0
    }).remove();
  });
});

p {
  background: red;
  color: white;
  height: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>

  <button>Run</button>
  <div id='demo'>
    <p>

    </p>
    <p>
      Lorem Ipsum .....
    </p>
  </div>

</body>

</html>

Use filter() with html() and trim()
trim() to remove spaces

answered Mar 10, 2017 at 4:08

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

guradio Over a year ago

@SisiSajah glad to help :)

Vikram Singh · Accepted Answer · 2017-03-10 04:09:20Z

0

$('#demo p').each(function(){
 if(!$(this).text() || !$(this).text().trim())
   $(this).remove();
})

answered Mar 10, 2017 at 4:09

Vikram Singh

9821 gold badge10 silver badges26 bronze badges

Collectives™ on Stack Overflow

jquery empty - remove html tag if no contents

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related