Элементтерді бір мезгілде өңдеу және жою

Бізде белгілі бір абзацтар жиыны бар делік:

<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 тегтеріне орап, осы тегтерге өңдеу мүмкіндігін қосыңыз, содан соң әрбір абзацтың соңына жою сілтемесін қосыңыз.