Бир эле учурда элементтерди оңдоо жана өчүрүү

Бизде белгилүү бир абзацтар жыйындысы бар деп коёлу:

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

Келгиле, бул абзацтар үчүн ар бир абзацтын текстин оңдоого жана ар бир абзацтын аягында өчүрүү үчүн шилтеме турушу үчүн кылалы.

Сүрөттөлгөн милдетти ишке ашырууда биз белгилүү бир көйгөйгө дуушар болобуз.

Көйгөйдүн мүнөзүн түшүнүү үчүн, HTML кодун карап чыгалы, ал ар бир абзацтын аягына өчүрүү шилтемелери кошулганда кандай болот:

html<div id="parent">
  <p>text1<a href="">өчүрүү</a></p>
  <p>text2<a href="">өчүрүү</a></p>
  <p>text3<a href="">өчүрүү</a></p>
</div>

Эми эле, каалаган абзацты чыкылдаганда анда текстти оңдоо үчүн input пайда болот деп элестетели. Бул учурда inputка абзацтын бардык тексти - өчүрүү шилтемеси менен кошо кирет!

Бул, албетте, туура эмес.

Абзацтардын тексттерин span теггерине ороп коюу дагы жакшы чечим болот, мындай:

html<div id="parent">
  <p><span>text1</span><a href="">өчүрүү</a></p>
  <p><span>text2</span><a href="">өчүрүү</a></p>
  <p><span>text3</span><a href="">өчүрүү</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>