Сохранение дочернего элемента при удалении родительского узла

Question

Я пытаюсь сделать панель инструментов, которая добавляется к строке таблицы после нажатия на нее. В приведенном ниже коде функциональность панели инструментов ограничена только удалением строки, чтобы сделать вещи более ясными. Идея состоит в том, чтобы «припарковать» панель инструментов в инструменты DIV (которая скрыта в реальном приложении), когда она не используется, и когда ее строка будет удалена. Проблема заключается в том, что панель инструментов исчезает после удаления строки таблицы. Это странно, потому что сначала он успешно добавляется к его «домашнему» (инструменты DIV) и удаляется из строки, которая должна быть удалена. Поэтому панель инструментов должна быть безопасной. Однако, когда событие onclick заканчивается, панель инструментов исчезла. Просмотрите фрагмент ниже, чтобы увидеть ситуацию перед полем предупреждения и после него. Что происходит?

function addToolbar(cell) { 
 
    cell.appendChild(document.getElementById('toolbar')); 
 
} 
 

 
function deleteRow(rownum) { 
 
    document.getElementById('tools').appendChild(document.getElementById('toolbar')); 
 
    document.getElementById('mytable').deleteRow(rownum); 
 
    alert('Now the toolbar is parked back to the "tools" DIV as it is suppossed to be. After you click OK the deleteRow() function returns and the toolbar will be deleted. Why?'); 
 
}

#tools, #mytable, #toolbar { 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 1px; 
 
}

<div id='tools'> 
 
    TOOLS DIV. Here is a place for parking the toolbar when not used. 
 
    Unfortunatelly it disappears 
 
    <div id='toolbar' onclick='deleteRow(this.parentNode.rowIndex)'> 
 
    Delete this row 
 
    </div> 
 
</div> 
 
<br> 
 
Click on the table rows below to append the "toolbar". 
 
<table id='mytable'> 
 
    <tr onclick='addToolbar(this);'> 
 
    <td> 
 
     First row 
 
    </td> 
 
    <td> 
 
     <!--a place for the toolbar--> 
 
    </td> 
 
    </tr> 
 
    <tr onclick='addToolbar(this)'> 
 
    <td> 
 
     Second row 
 
    </td> 
 
    <td> 
 
     <!--a place for the toolbar--> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

Что происходит, что щелчок событие ориентации панели инструментов пузырей до родительского узла (в данном случае, tr ряда), вызывая его onclick обработчика.

Вы можете предотвратить этот механизм, передав объект события вашей функции deleteRow и вызвав его метод stopPropagation.

function addToolbar(cell) { 
 
    cell.appendChild(document.getElementById('toolbar')); 
 
} 
 

 
function deleteRow(event, rownum) { 
 
    document.getElementById('tools').appendChild(document.getElementById('toolbar')); 
 
    document.getElementById('mytable').deleteRow(rownum); 
 
    alert('Now the toolbar is parked back to the "tools" DIV as it is suppossed to be. After you click OK the deleteRow() function returns and the toolbar will be deleted. Why?'); 
 

 
    event.stopPropagation(); 
 
}

#tools, #mytable, #toolbar { 
 
    border-style: solid; 
 
    border-color: black; 
 
    border-width: 1px; 
 
}

<div id='tools'> 
 
    TOOLS DIV. Here is a place for parking the toolbar when not used. 
 
    Unfortunatelly it disappears 
 
    <div id='toolbar' onclick='deleteRow(event, this.parentNode.rowIndex)'> 
 
    Delete this row 
 
    </div> 
 
</div> 
 
<br> 
 
Click on the table rows below to append the "toolbar". 
 
<table id='mytable'> 
 
    <tr onclick='addToolbar(this);'> 
 
    <td> 
 
     First row 
 
    </td> 
 
    <td> 
 
     <!--a place for the toolbar--> 
 
    </td> 
 
    </tr> 
 
    <tr onclick='addToolbar(this)'> 
 
    <td> 
 
     Second row 
 
    </td> 
 
    <td> 
 
     <!--a place for the toolbar--> 
 
    </td> 
 
    </tr> 
 
</table>

Я не совсем уверен, что event объект доступен в HTML декларации на всех современных браузерах, так что я бы посоветовал прикрепление слушателей событий программно.