フォームで画像選択時にプレビュー表示する【HTML・CSS・JQuery】

<!-- フォームで選択した画像を表示するimgタグ -->
<img id="img" accept="image/*" src="https://tool-engineer.work/wp-content/uploads/2022/06/default.png">

<div class="buttons">
    <!-- フォーム -->
    <input type="file" name="logo" id="form" accept=".jpg, .jpeg, .png, .gif">

    <!-- 画像削除ボタン -->
    <button type="button" id="delete">削除</button>
</div>

('#form').on('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#img").attr('src', e.target.result);
    }
    reader.readAsDataURL(e.target.files[0]);
});

$('#delete').on('click', function (e) {
   //プレビュー表示をデフォルトに戻す
   $("#img").attr('src', 'https://tool-engineer.work/wp-content/uploads/2022/06/default.png');
   //フォームのvalueを初期化
   $("#form").val('');
});