Javascript удалить, не удаляя все элементы

Поскольку в вашем коде уже есть jQuery, вы можете просто использовать это, чтобы удалить все кнопки:

$(".buddy_blocks").remove();

Ваша попытка не сработала по двум причинам:

1. document.getElementsByClassName() возвращает динамический список узлов, который меняется под вами каждый раз, когда вы удаляете элемент, из-за чего вы пропускаете элементы в своей итерации.
2. Потому что элемент DOM не имеет метода .remove() (во всяком случае, в большинстве браузеров — это предлагаемый метод, но он еще не широко доступен). У родителя есть метод .removeChild(), который вы можете использовать вместо него.

В простом Javascript вы можете настроить свою итерацию в обратном порядке, чтобы при удалении элементов и изменении динамической коллекции HTMLCollection это не испортило вашу итерацию, потому что изменения будут элементами, которые вы уже прошли. И переключитесь на использование .removeChild() следующим образом:

function f() {
    var x = document.getElementsByClassName("buddy_blocks");
    for(var i = x.length - 1; i >= 0; i--) {
        x[i].parentNode.removeChild(x[i]);
    }
}

Кроме того, пожалуйста, используйте var для всех переменных, которые должны быть локальными для вашей функции, чтобы вы не создавали "случайные глобальные переменные", которые затруднят обнаружение ошибок в будущем.

При переборе массива и его изменении начинайте с последнего индекса, чтобы избежать побочных эффектов для текущей позиции индекса при удалении элементов.

$("#c").click(function() {
  f();
});

function f() {
  x = document.getElementsByClassName("buddy_blocks");
  for(i=x.length-1;i>=0;i--)
    x[i].remove();
}

Вы зацикливались на элементах.

x = document.getElementsByClassName("buddy_blocks");
for(i=0;i<x.length;i++)
    x[i].remove();

x - это NodeList, а не массив. Это просмотр текущих элементов в режиме реального времени, который соответствует элементам этого класса. Поэтому, когда вы удаляете первый элемент, то, что было первым элементом, больше не находится в списке, а второй элемент теперь является первым элементом. Но вы перешли к тому, что было третьим элементом, но теперь это новый второй элемент.

Конечным результатом является удаление только половины элементов.

Рассмотрим либо это:

//remove the first item from the NodeList until there is nothing left
x = document.getElementsByClassName("buddy_blocks");
while(x.length > 0) {
    x[0].remove();
}

or:

//remove from the end of the list, which won't cause other elements to change position
x = document.getElementsByClassName("buddy_blocks");
for(i=x.length-1;i>=0;i--) {
    x[i].remove();
}

jQuery способ удалить все элементы с классом 'buddy_blocks':

$(".buddy_blocks").remove();

скрипка

простой способ javascript:

var elems = document.getElementsByClassName('buddy_blocks'),
    elem;
while(elems.length){
    elem = elems.item(0);
    elem.parentNode.removeChild(elem);
}

скрипка

Причиной такого поведения является то, что переменная, содержащая элемент DOM "x", указывает на активный элемент DOM. Таким образом, каждый раз, когда вы удаляете один элемент, «x» содержит новую структуру DOM. Поэтому нам нужно использовать цикл while ниже и продолжать удалять 1-й дочерний элемент из DOM.

$("#c").click(function() {
  f();
});
function f() {
   x = document.getElementsByClassName("buddy_blocks");
//for(i=0;i<x.length;i++)
//x[i].remove();
    var i = 0;
    while(x.length) {
     x[0].remove();
        i++;
    }
}