Redaktimi dhe Fshirja e Njëkohshme e Elementeve

Le të themi se kemi një grup të caktuar paragrafësh:

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

Le t'i bëjmë këto paragrafe të tilla që teksti i çdo paragrafi të mund të redaktohet dhe në fund të çdo paragrafi të ketë një lidhje për fshirje.

Gjatë implementimit të detyrës së përshkruar na pret një problem i caktuar.

Për të kuptuar thelbin e problemit, le të shohim kodin HTML që do të fitohet, kur në fund të çdo paragrafi do të shtohen lidhjet për fshirje:

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>

Le të imagjinojmë tani, që me një klikim në çdo paragraf, në të do të shfaqet një input për redaktim të tekstit. Në këtë rast, në input do të hyjë i gjithë teksti i paragrafit - së bashku me lidhjen për fshirje!

Kjo, sigurisht, nuk është e saktë.

Një zgjidhje më e suksesshme do të ishte mbështjellja e teksteve të paragrafëve në etiketat span, kështu:

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>

Për një kod të tillë thjesht mund të vendosni një ngjarje për redaktim jo në vetë paragrafin, por në span me tekst. Në këtë rast, input-i për redaktim do të shfaqet brenda etiketës span, dhe lidhja jonë për fshirje do të mbetet e paprekur.

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>