Изменение id объекта при клике

Если я верно понимаю, то вы собираетесь через изменение id управлять внешним видом меню и / или строить на этом логику вашего js-кода. Это плохая идея, так как она противоречит и стандартам html, и общепринятой практике написания подобных вещей. как вам уже верно советуют в комментариях к вашему вопросу, данную вещь нужно реализовывать через изменение классов. Собственно, как только вы углубитесь в реализацию логики своего кода, вы поймете, что менять id ваших элементов в DOM - это путь к неопределенности в коде с тем, что у вас чем является и что в данный момент должно делать.

Но, отвечая на ваш вопрос:

Во-первых, у вас в приведенном вами варианте не чистый js, а js с использованием библиотеки JQUery.

Во-вторых, приведенный вами код не рабочий, он меняет id не у этого же элемента. Вы можете проверить это тут:

$('div').click(function(event) { 
  //Удаляем старые id 
  $('#menuburger').attr('id', null); 
  $('#menuclose').attr('id', null); 
 
  //Ставим новые 
  $(this).parent().prev().attr('id', 'menuburger'); 
  $(this).attr('id', 'menuclose'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="menuburger">test</div>

В-третьих, даже если поправить этот код, он все равно не будет рабочим, так как обработчики событий после таких выкрутасов перестанут понимать, что от них требуется - это произойдет опять же в силу того, что никто не предполагает такой логики приложений. Можете проверить это здесь:

$('#menuburger.navbar-menu').click(function() { 
  $(this).attr('id', 'menuclose'); 
}); 
$('#menuclose.navbar-menu').click(function() { 
  $(this).attr('id', 'menuburger'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="menuclose" class="navbar-menu">test</div>

В заключение, могу лишь еще раз посоветовать использовать для подобных вещей классы.

Судя с вопроса, вам нужно именно скрывать/показывать меню, я конечно не большой эксперт по js, но id на странице должны быть уникальными (припустим, если у вас будет 10 таких менюшек, на странице, как поступать тогда с id ?), поэтому, для показывания/скрытия менюшек, смену id я бы использовать не стал, лучшим вариантом будет при клике добавить класс (пусть он зовется invisible), а при следующем клике его убрать.

Вот краткий пример кода на JS:

document.getElementById("menuburger").addEventListener("click", function() { 
  document.getElementById("test").classList.toggle("invisible"); 
});

.invisible { 
  display: none; 
}

<button id="menuburger">test it</button> 
 
<div id="test" style="background-color:red">this is some menu or whatever</div>

Решил проблему через z-index) Спасибо большое всем, кто откликнулся!

`<script>
$(document).ready(function() {
    $('#menuburger').on('click', function (){
        $('#menuclose').css('z-index','11');
    });
   $('#menuclose, #menuclosebg, #menucloselink').on('click', function (){
       $('#menuclose').css('z-index','9');
   })
});
</script>`