Տարրերի միաժամանակյա խմբագրում և ջնջում

Ենթադրենք ունենք որոշակի պարբերությունների հավաքածու.

<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 թեգերի մեջ, ավելացրեք այդ թեգերին խմբագրման հնարավորություն, այնուհետև ավելացրեք յուրաքանչյուր պարբերության վերջում հղում ջնջելու համար։