Есть ли способ очистить все innerHTML?

Question

Как говорится в заголовках, мне интересно, можно ли очистить каждый innerHTML, измененный с помощью javascript.

Например, если у меня есть 20 функций, каждый из которых заменил innerHTML p-tag, могу ли я заставить их всех ничего не содержать (одним нажатием кнопки) без изменения .innerHTML для каждого из них?

function resetAll() { 
    outputOne.innerHTML = ""; 
    outputTwoA.innerHTML = ""; 
    outputTwoB.innerHTML = ""; 
    outputThreeA.innerHTML = ""; 
    outputThreeB.innerHTML = ""; 
    outputThreeC.innerHTML = ""; 
} 

Это пример того, что я не хочу делать.

Я знаю, что могу обновить страницу, но это не то решение, о котором я прошу.

Answer 1

Используя только javascript, вам нужно будет перевернуть все их. Вы можете сделать это с общим классом:

var clearUs = document.querySelectorAll('.common-class'); 
var index = 0, length = clearUs.length; 
for (; index < length; index++) { 
    clearUs[index].innerHTML = ''; 
} 

Если вы хотите использовать что-то вроде JQuery его меньше кода, но по-прежнему цикл происходит в фоновом режиме, вы просто не нужно, чтобы увидеть или введите:

$('.common-class').html(''); 

Answer 2

Создайте класс, установите на тэг p и выберите все этого класса и запустите его для очистки.

Answer 3

Просто кешируйте в своем методе изменения, какие элементы вы изменили, а затем перейдете по измененному массиву и очистите его innerHTML.

Можно конечно еще проверить, если измененный массив уже содержит элемент, подталкивают в, но для примера, я подумал, что это достаточно

var changed = []; 
 

 
function change(pIndex, text) { 
 
    var all = document.getElementsByTagName('p'); 
 
    if (!all || !all[pIndex]) { 
 
    // element not found 
 
    return; 
 
    } 
 
    all[pIndex].innerHTML = text; 
 
    changed.push(all[pIndex]); 
 
} 
 

 
function clearAll() { 
 
    for (var i = 0, len = changed.length; i < len; i++) { 
 
    changed[i].innerHTML = ''; 
 
    } 
 
    changed.splice(0, changed.length); 
 
}

<p></p> 
 
<p></p> 
 
<p></p> 
 
<button onclick="change(0, 'test')" type="button">Set p 1</button> 
 
<button onclick="change(1, 'test')" type="button">Set p 1</button> 
 
<button onclick="change(2, 'test')" type="button">Set p 1</button> 
 
<button onclick="clearAll();" type="button">Clear</button>