Сохранение идентификатора для определенного элемента onclick

Question

Я пытаюсь создать JavaScript, на котором вы пишете сообщение, и на веб-сайте появляется время и сообщение. Функция, выполняющая это, - «renderMessage». Однако он включает изображение, которое вы можете щелкнуть, чтобы удалить это сообщение, а затем я хочу снова написать все остальные. Проблема в том, что я не знаю, как сохранить какой-то идентификатор, поэтому я знаю, какое изображение было нажато, поэтому я удаляю правильную позицию в массиве сообщений.

Код для renderMessage является:

function renderMessage(theMessage, theMessages){ 
    var text = document.createTextNode(theMessage.getText()); 
    var time = document.createTextNode(theMessage.getDate()); 
    var div = document.getElementById("writeMessages"); 

    div.appendChild(text); 
    div.appendChild(time); 

    var image = document.createElement('img'); 
    image.src = 'img/deletePic.png'; 

    div.appendChild(image); 
    div.appendChild(document.createElement('br')); 

    image.onclick = function(e){ 

     theMessages.splice(); // This is where I don't know how to remove the correct one 
     removeAll(theMessages); // This removes all html code in the div and writes 
           // the array again (hopefully this time with the correct 
           // element removed from it) 
    }; 
} 

Answer 1

Во-первых, большие пальцы вверх для использования простых js.

Я бы сказал, что вы прилагаете сообщение, время и изображение к другому элементу. Мой be ulli блок. И, когда вы оказываете сообщения в DOM, установить идентификатор сообщения, как id атрибут li так будет что-то вроде этого

<ul> 
    <li>Message 1 - 10:21 PM <img src="remove jpg"/></li> 
    <li>Message 2 - 10:22 PM <img src="remove jpg"/></li> 
</ul> 

и код JS может быть,

image.onclick = function() { 
    var message_id = this.parentNode.id; 

    // here you got the message id. 
    // splice your message array and render 
} 

Почему вы перепрофилируете все сообщения? Вы могли бы просто

// splice your message array and render 

    var li = this.parentNode; 
    li.parentNode.removeChild(li); 
} 

Answer 2

вы можете сохранить идентификатор сообщения внутри атрибута элемента. например <div class="your_message_container data-id="14">...</div>

Использование JQuery для примера вы можете прочитать этот атрибут с $(your_selector).attr("data-id"); и записать его с $(your_selector).attr("data-id", "new_value");

В качестве альтернативы, также взглянуть на http://api.jquery.com/jquery.data/

Edit:

я сделал ты fiddle with pure js: http://jsfiddle.net/A64zh/2/ Обратите внимание, что идентификатор элемента сообщения должен быть равен атрибуту data-message-id вашего изображения удаления.

Преимущество использования атрибута элемента для хранения идентификатора заключается в том, что ваш javascript не зависит от структуры html, как если бы вы использовали что-то вроде this.parentNode.parentNode.removeChild...., которое необходимо было бы изменить, если бы вы добавили больше html-слоев в между двумя