요소의 동시 편집 및 삭제

다음과 같은 단락 집합이 있다고 가정해 보겠습니다:

html<div id="parent">
  <p>text1</p>
  <p>text2</p>
  <p>text3</p>
</div>

이 단락들에 대해 각 단락의 텍스트를 편집할 수 있고, 각 단락 끝에 삭제 링크가 있도록 만들어 봅시다.

설명된 작업을 구현할 때 우리는 몇 가지 문제에 직면할 것입니다.

문제의 본질을 이해하기 위해, 각 단락 끝에 삭제 링크가 추가될 때 얻어지는 HTML 코드를 살펴보겠습니다:

html<div id="parent">
  <p>text1<a href="">remove</a></p>
  <p>text2<a href="">remove</a></p>
  <p>text3<a href="">remove</a></p>
</div>

이제 어떤 단락을 클릭하면 해당 단락에 텍스트 편집을 위한 input이 나타난다고 가정해 보겠습니다. 이 경우 input에는 단락의 전체 텍스트 - 삭제 링크까지 포함되어 들어가게 됩니다!

이는 당연히 올바르지 않습니다.

더 나은 해결책은 단락 텍스트를 span 태그로 감싸는 것입니다. 다음과 같이요:

html<div id="parent">
  <p><span>text1</span><a href="">remove</a></p>
  <p><span>text2</span><a href="">remove</a></p>
  <p><span>text3</span><a href="">remove</a></p>
</div>

이러한 코드의 경우 단순히 편집 이벤트를 단락 자체가 아닌 텍스트가 있는 span에 부착할 수 있습니다. 이 경우 편집용 input은 span 태그 안에 나타나고, 우리의 삭제 링크는 그대로 유지될 것입니다.

html<div id="parent">
  <p><span>text1</span></p>
  <p><span>text2</span></p>
  <p><span>text3</span></p>
</div>

html<div id="parent">
  <p>text1</p>
  <p>text2</p>
  <p>text3</p>
</div>