UPDATE: THIS SOLUTION NO LONGER WORKS
After some testing, it appears Canvas has revoked the right for students to delete or edit comments using the API. I've tried both PUT and DELETE for /api/v1/courses/*/assignments/*/submissions/*/comments and I've tried DELETE for the internal api /submission_comments/* that is used by speedgrader. Neither work when acting as a student. If someone wants to continue fiddling with the original solution, I'll leave it here.
OLD COMMENT
While it's true Canvas hasn't created an interface for deleting comments, students DO have the access rights to delete comments, they're just missing a button to do it. If you are a student and would like to delete a comment without reaching out to your teacher, here are the steps you should follow.
1. Open Canvas in Chrome and navigate to the submission page where you can see your comment you'd like to delete.
2. Open the Chrome console (ctrl + shift + i)
3. Paste this code into the console and run it (press enter)
$.delete = function (url, data) {
return $.ajax({
url: url,
data: data,
type: 'DELETE'
});
}
$(".comment_list div.comment").each(function() {
let el = $(this);
let id = el.attr("id");
if (id !== undefined) {
let userName = el.find(".author_name").text().trim();
if (userName == ENV.current_user.display_name.trim()) {
console.log(userName);
let commentId = id.replace("submission_comment_", "");
console.log(commentId);
el.css("position", "relative");
let button = $(`<span style="position: absolute; top: 0; right: 0; color: #888;">x</span>`);
button.click(function() {
let url = `/api/v1${window.location.pathname}/comments/${commentId}`
$.delete(url);
el.remove();
});
el.append(button);
}
}
});
4. Click the X that appears by your comment.
update 10/26/2023 - fixed an issue where it doesn't show the x on some assignments.
If it still doesn't show up, you can try this. It strips out the check to see if the comment is written by you. This means you'll get an x on every comment, but only the ones written by you will work. The rest will throw an error.
$.delete = function (url, data) {
return $.ajax({
url: url,
data: data,
type: 'DELETE'
});
}
$(".comment_list div.comment").each(function() {
let el = $(this);
let id = el.attr("id");
if (id !== undefined) {
let commentId = id.replace("submission_comment_", "");
console.log(commentId);
el.css("position", "relative");
let button = $(`<span style="position: absolute; top: 0; right: 0; color: #888;">x</span>`);
button.click(function() {
let url = `/api/v1${window.location.pathname}/comments/${commentId}`
$.delete(url);
el.remove();
});
el.append(button);
}
});