Chỉnh sửa và Xóa phần tử đồng thời

Giả sử chúng ta có một tập hợp các đoạn văn:

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

Hãy thực hiện cho các đoạn văn này sao cho có thể chỉnh sửa văn bản của từng đoạn văn và đồng thời ở cuối mỗi đoạn văn có một liên kết để xóa.

Khi triển khai nhiệm vụ được mô tả, chúng ta sẽ gặp một vấn đề nào đó.

Để hiểu bản chất của vấn đề, chúng ta hãy xem mã HTML sẽ thu được, khi các liên kết xóa được thêm vào cuối mỗi đoạn văn:

<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>

Bây giờ, hãy tưởng tượng rằng khi nhấp vào bất kỳ đoạn văn nào, một trường nhập liệu để chỉnh sửa văn bản sẽ xuất hiện trong đó. Trong trường hợp này, toàn bộ văn bản của đoạn văn - cùng với liên kết xóa! - sẽ được đưa vào trường nhập liệu.

Điều này, tất nhiên, là không đúng.

Một giải pháp tốt hơn sẽ là bọc văn bản của các đoạn văn trong thẻ span, như thế này:

<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>

Với mã như vậy, chúng ta có thể chỉ cần gắn sự kiện cho việc chỉnh sửa không phải lên chính đoạn văn, mà lên thẻ span chứa văn bản. Trong trường hợp này, trường nhập liệu để chỉnh sửa sẽ xuất hiện trong thẻ span, và liên kết xóa của chúng ta sẽ vẫn nguyên vẹn.

Cho mã HTML sau:

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

Thêm một liên kết xóa vào cuối mỗi đoạn văn.

Thiết lập sao cho khi nhấp vào span, một trường nhập liệu để chỉnh sửa sẽ xuất hiện trong đó.

Bây giờ, giả sử ban đầu không có thẻ span:

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

Đầu tiên hãy bọc văn bản của đoạn văn vào thẻ span, thêm khả năng chỉnh sửa cho các thẻ này, và sau đó thêm một liên kết xóa vào cuối mỗi đoạn văn.