Vanilla JS로 inline 요소의 text node 제거하기

몇 달전에도 작업한 바 있으나 jQuery를 쓴 코드였고, 이번에는 Vanilla JS로 작업을 해보았다.

1
2
3
4
5
6
7
8
9
10
11
12
<ul class="has-whitespace">
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
</ul>

<div class="has-whitespace">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

1
2
3
4
li {
  display: inline-block;
  background: skyblue;
}

1
2
3
4
5
6
7
8
9
(function(parentElem) {
  if (!parentElem) return;
  
  for (let i = 0; i < parentElem.length; i++) {
    Array.from(parentElem[i].childNodes).forEach((childElem) => {
      if (childElem.nodeType === 3) parentElem[i].removeChild(childElem);
    });
  }
})(document.querySelectorAll(".has-whitespace"));

childNodes는 NodeList를 반환하고, NodeList는 유사배열이므로 배열로 바꾸어주려고 Array.from() 메서드를 사용했으나 ES6를 지원하지 않는 IE에서 작동하지 않아 Array.prototype.slice.call 메서드로 해결했음(참고로 블로그에 적용한 스크립트인데, 몇 주 쓰다가 폐기함.. flex 레이아웃을 쓰니까 필요없어짐)

자식 요소의 nodeType이 text일 경우 해당 요소를 제거하는 로직으로 구성했다.

See the Pen wvGBaev by sel (@selucky) on CodePen.

Hero image from stories