Удалите регион, используя кнопку в самой области

Question

Я добавил кнопку font-star в регионе - для того, чтобы удалить регион; Это выглядит следующим образом:

вот код, который я добавил к функции визуализации в wavesurfer.regions.js:

var deleteButton = regionEl.appendChild(document.createElement('i')); 
 
deleteButton.className = 'fa fa-trash'; 
 
deleteButton.onclick = "wavesurfer.clearRegions();"; 
 
deleteButton.title = "Delete region"; 
 

 
    var css = { 
 
\t display: 'block', 
 
\t float: 'right', 
 
\t padding: '3px', 
 
\t position: 'relative', 
 
\t zIndex: 10, 
 
\t cursor: 'pointer', 
 
\t cursor: 'hand', 
 
\t color: '#129fdd' 
 
    }; 
 
    this.style(deleteButton, css);

Когда я смотрю на HTML оказанной , он не содержит события onclick; И, очевидно, при нажатии он ничего не делает. Как я могу получить событие onclick для отображения в обработанном HTML в первую очередь? Во-вторых, каков наилучший способ получить метод clearRegions?

Вот отрезала оказанной HTML:

<region class="wavesurfer-region" title="0:53-1:18" data-id="wavesurfer_cvb9j0n784o" style="position: absolute; z-index: 2; height: 100%; top: 0px; left: 543px; width: 255px; background-color: rgba(0, 0, 0, 0.0980392); cursor: move;"><i class="fa fa-trash" title="Delete region" style="display: block; float: right; padding: 3px; position: relative; z-index: 10; cursor: pointer; color: rgb(18, 159, 221);"></i><handle class="wavesurfer-handle wavesurfer-handle-start" style="cursor: col-resize; position: absolute; left: 0px; top: 0px; width: 1%; max-width: 4px; height: 100%;"></handle><handle class="wavesurfer-handle wavesurfer-handle-end" style="cursor: col-resize; position: absolute; left: 100%; top: 0px; width: 1%; max-width: 4px; height: 100%;"></handle></region>

Tkx

Answer 1

deleteButton.onclick = function(){}; 

Ваш синтаксис неправильный приятель. Вам не нужно ставить кавычки. И если есть какая-то другая проблема, поделитесь своим полным кодом, который поможет решить проблему.