तत्वों का एक साथ संपादन और हटाना
मान लीजिए कि हमारे पास पैराग्राफ का एक निश्चित सेट है:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
आइए इन पैराग्राफ के लिए ऐसा व्यवस्थित करें कि प्रत्येक पैराग्राफ के टेक्स्ट को संपादित किया जा सके और साथ ही प्रत्येक पैराग्राफ के अंत में हटाने के लिए एक लिंक हो।
वर्णित कार्य को लागू करते समय हमारे सामने कुछ समस्या आएगी।
समस्या का सार समझने के लिए, आइए 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>
अब कल्पना कीजिए कि किसी भी पैराग्राफ पर क्लिक करने पर उसमें टेक्स्ट संपादन के लिए एक इनपुट दिखाई देगा। इस स्थिति में इनपुट में पूरा टेक्स्ट आ जाएगा - हटाने के लिंक के साथ!
यह, निश्चित रूप से, सही नहीं है।
एक बेहतर समाधान यह होगा कि टेक्स्ट को
span टैग में लपेटा जाए, इस तरह:
<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 पर लगाया जा सकता है।
इस स्थिति में संपादन के लिए इनपुट
span टैग में दिखाई देगा, और हमारा हटाने के लिए लिंक
अछूता रहेगा।
निम्नलिखित HTML कोड दिया गया है:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
प्रत्येक पैराग्राफ के अंत में हटाने के लिए लिंक जोड़ें।
ऐसा करें कि span पर क्लिक करने पर
उसमें संपादन के लिए एक इनपुट दिखाई दे।
मान लीजिए कि अब शुरू में span टैग नहीं हैं:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
पहले पैराग्राफ के टेक्स्ट को span टैग में लपेटें,
इन टैग में संपादन की क्षमता जोड़ें,
और फिर प्रत्येक पैराग्राफ के अंत में हटाने के लिए
लिंक जोड़ें।
