Query selector - absolut vs. relativ

Hallo,

ich generiere mit PHP Nachrichten mit einem Edit-Button im Titel um diese zu bearbeiten. Mit JS registrier ich dann nen Onclick-Handler und ersetze die Nachricht (Paragraph) mit einer Textbox.

Aber mir fällt dabei auf, dass ich im JS dann von diesem Button im DOM-Tree ausgehen muss. Also mach ich sowas wie $(this).parent().children().last() um an diesen Paragraphen zu kommen.

Wenn sich dann irgendwann mal was im Tree ändert, sodass man beispielsweise von parent().parent() ausgehen muss, ist der JS Code kaputt.

Wie kann ich da absolut an die Sache rangehen?

BasicMan01

Um das ganze hangeln durch den DOM-Baum zu vermeiden, könntest du dem Paragraph-Tag direkt eine ID geben und direkt ansteuern. Diese id könntest du dann dem Button mitliefern und per Javascript auslesen.

<h1>
	<span>Title</span>
	<button id="but123" data-message-id="msg123">EDIT</button>
</h1>

<p id="msg123">Meine Nachricht oder sonst was</p>

document.getElementById('but123').addEventListener('click', function(event) {
	var messageId = event.target.dataset.messageId;
	var messageObject = document.getElementById(messageId);

	messageObject.innerHTML = '<textarea>' + messageObject.innerHTML + '</textarea>';
});