JSFiddle - React, Tailwind, and code Playground
HTML
<button type="button">Minify Now</button>
<p>Open console to see execution time...</p>
<ul class="ul">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
<li>list item 7</li>
<li>list item 8</li>
<li>list item 9</li>
<li>list item 10</li>
<li>list item 11</li>
<li>list item 12</li>
<li>list item 13</li>
<li>list item 14</li>
<li>list item 15</li>
<li>list item 16</li>
<li>list item 17</li>
<li>list item 18</li>
<li>list item 19</li>
<li>list item 20</li>
<li>list item 21</li>
<li>list item 22</li>
<li>list item 23</li>
<li>list item 24</li>
<li>list item 25</li>
<li>list item 26</li>
<li>list item 27</li>
<li>list item 28</li>
<li>list item 29</li>
<li>list item 30</li>
<li>list item 31</li>
<li>list item 32</li>
<li>list item 33</li>
<li>list item 34</li>
<li>list item 35</li>
<li>list item 36</li>
<li>list item 37</li>
<li>list item 38</li>
<li>list item 39</li>
<li>list item 40</li>
<li>list item 41</li>
<li>list item 42</li>
<li>list item 43</li>
<li>list item 44</li>
<li>list item 45</li>
<li>list item 46</li>
<li>list item 47</li>
<li>list item 48</li>
<li>list item 49</li>
<li>list item 50</li>
<li>list item 51</li>
<li>list item 52</li>
<li>list item 53</li>
<li>list item 54</li>
<li>list item 55</li>
<li>list item 56</li>
<li>list item 57</li>
<li>list item 58</li>
<li>list item 59</li>
<li>list item 60</li>
<li>list item 61</li>
<li>list item 62</li>
<li>list item 63</li>
<li>list item 64</li>
<li>list item 65</li>
<li>list item 66</li>
<li>list item 67</li>
<li>list item 68</li>
<li>list item 69</li>
<li>list item 70</li>
<li>list item 71</li>
<li>list item 72</li>
<li>list item 73</li>
<li>list item 74</li>
<li>list item 75</li>
<li>list item 76</li>
<li>list item 77</li>
<li>list item 78</li>
<li>list item 79</li>
<li>list item 80</li>
<li>list item 81</li>
<li>list item 82</li>
<li>list item...
CSS
li {
display: inline-block;
border: 1px solid red;
}
JavaScript
// minify white space between html elements
const minify_html = (dom_node) => {
dom_node.childNodes.forEach(node => {
const isTextNode = node.nodeType === 3;
const isEmpty = node.nodeValue.trim().length === 0
if (isTextNode && isEmpty){
dom_node.removeChild(node);
}
});
};
const btn = document.querySelector('[type="button"]');
const ul = document.querySelector('.ul');
btn.addEventListener('click', () => {
console.time('test');
minify_html(ul);
console.timeEnd('test')
});