Tutorials for Developers_
Search
Close this search box.

How to remove unwrapped text in HTML using jQuery?

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar is an expert Web Developer, SEO specialist, and Graphic Designer. Hafiz Faraz is an expert in WordPress design and development. Hire on Upwork | Hire on Fiverr
How-to-remove-unwrapped-text-in-HTML-using-jQuery

Problem:

In the following HTML, there are unwrapped text or strings i.e  ‘ok‘, ‘sure‘ and  ‘nope‘. I want to delete them from my WordPress site. But since they are not wrapped in any HTML tag separately, when I deleted them using CSS property display: none it hides full td content.  Whats the solution to it? I want to delete only the above-mentioned strings while keeping the input tags in td.

<table>
  <tr>
    <td>
      <input type="checkbox" value="hi"> ok
      <br>
      <input type="checkbox" value="hello"> sure
      <br>
      <input type="checkbox" value="hey"> nope
      <br>
    </td>
  </tr>
</table>

Solution:

Please include this jQuery code in your site. Replace td(line 4) with your html tag that contains the string that you would like to replace. Secondly, replace the ok(line 6) keyword with your string that you would like to replace:

jQuery(function($){

	// Replace 'td' with your html tag
	$("td").html(function() { 

		// Replace 'ok' with string you want to change, you can delete 'hello everyone' to remove the text
		  return $(this).html().replace("ok", "hello everyone");  
	
	});
});

After doing this, you will have strings replaced while html still in place.

Full Code:

Here is complete solution on jsFiddle:

Leave a Reply

Your email address will not be published. Required fields are marked *