phpでのtodolist の削除機能について

ドットインストールを参考にしながらphp+mysql+js+ajaxでtodolistを作成しています。

そこで✖︎印をクリックでリストの削除を行いたいのですが、クリックしても削除ができません。
ご教示お願いいたします。

index.php

<?php

session_start();

require_once(__DIR__ . '/config.php');
require_once(__DIR__ . '/functions.php');
require_once(__DIR__ . '/todo.php');

$todoApp = new \MyApp\todo();
$todos = $todoApp->getAll();

//var_dump($todos);
//exit;
?>

<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="utf-8">
   <title>To Do List</title>
<link rel ="stylesheet" href="list.css">
  </head>
  <body>
    <div id="container">
      <h1>やることリスト</h1>
      <form action="">
    <input type ="text" id=new-data>
    </form>
    <ul id="todos">
    <?php foreach($todos as $todo) : ?>
      <li id="todo_<?php echo h($todo->id); ?>" data-id="<?php echo h($todo->id); ?>">
      <input type="checkbox" class="update_todo" <?php if($todo->state==='1'){echo 'checked';} ?>>
        <span class="todo_title <?php if($todo->state ==='1'){echo 'done';} ?>"><?php echo h($todo->title); ?>
        </span>
        <div class="delete">x</div>
      </li>
    <?php endforeach; ?>
    </ul>
    </div>
    <input type="hidden" id="token" value="<?php echo ($_SESSION['token']); ?>">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

$(function(){
'use strict';

//update
$('#todos').on('click', '.update_todo',function(){
var id = $(this).parents('li').data('id');
$.post('ajax.php',{
  id: id,
  mode: 'update',
  token: $('#token').val()
}, function(res){
if(res.state === '1'){
  $('#todo_' +id).find('.todo_title').addClass('done');
}else{
  $('#todo_' +id).find('.todo_title').removeClass('done');
}
})

});

//delete
$('#todos').on('click', '.delete_todo',function(){
  var id = $(this).parents('li').data('id');

  if(confirm('are you sure?')){
    $.post('ajax.php',{
      id: id,
      mode: 'delete',
      token: $('#token').val()
    }, function(){
      $('#todo_' +id).fadeOut(800);
    });

  }
   
  });
});

ajax.php

<?php

session_start();

require_once(__DIR__ . '/config.php');
require_once(__DIR__ . '/functions.php');
require_once(__DIR__ . '/todo.php');

$todoApp = new \MyApp\todo();

if($_SERVER['REQUEST_METHOD']==='POST'){
 try{
   $res=$todoApp->post();
   header('Content-Type: application/json');
   echo json_encode($res);
   exit;
 }catch (Exception $e){
   header($_SERVER['SERVER_PROTOCOL'] . '500 Internal Server Error', true, 500);
   echo $e->getMessage();
   exit;
 }

}
?>

todo.php

<?php

namespace MyApp;

class todo{
 private $_db;

 public function __construct(){
   $this->_createToken();

   try{
     $this->_db = new \PDO(DSN,DB_USERNAME, DB_PASSWORD);
     $this->_db->setAttribute(\PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);
   }catch (\PDOException $e) {
     echo $e->getMessage();
     exit;
   }
 }

 private function _createToken(){
   if(!isset($_SESSION['token'])){
   $_SESSION['token']= bin2hex(openssl_random_pseudo_bytes(16));
   }

 }

 public function getAll(){
   $stmt = $this->_db->query("select *  from todos order by id asc ");
   return $stmt->fetchAll(\PDO::FETCH_OBJ);
 }

 
 public function post(){
   $this->_validateToken();

   if(!isset($_POST['mode'])){
     throw new \Exception('mode not set!');
   }

   switch($_POST['mode']){
     case 'update':
      return $this->_update();
     case 'create':
      return $this->_create();
     case 'delete':
      return $this->_delete();
   }
  }

  private function _validateToken(){
    if(
      !isset($_SESSION['token']) ||
      !isset($_POST['token']) ||
      $_SESSION['token'] !== $_POST['token']
    ){
      throw new \Exception('invalid token!');
    }
  }

  private function _update(){
    if(!isset($_POST['id'])){
      throw new \Exception('[update] id not set!');
    }

    $this->_db->beginTransaction();
    $sql=sprintf("update todos set state=(state+1) %% 2 where id= %d",$_POST['id']);
    $stmt= $this->_db->prepare($sql);
    $stmt->execute();

    $sql=sprintf("select state from todos where id= %d",$_POST['id']);
    $stmt= $this->_db->query($sql);
    $state=$stmt->fetchColumn();

    $this->_db->commit();

    return[
      'state'=>$state
    ];
  
  }

  private function _create(){

  }

  private function _delete(){
    if(!isset($_POST['id'])){
      throw new \Exception('[delete] id not set!');
    }

    $sql=sprintf("delete from todos where id= %d",$_POST['id']);
    $stmt= $this->_db->prepare($sql);
    $stmt->execute();

    return[];
  }
}
?>

m.ts10806

2020/07/30 03:17

「うまくいかない」とは？ https://teratail.com/help/question-tips#questionTips3-4 それに、本アプリケーションの仕様を知っているのは質問者さんだけです。システム要件も具体的に(環境情報も含めて)ご提示ください

行動規範の内容に同意します

回答1件

m.ts10806さんがおっしゃっているように、どういう仕様で、どううまくいっていないかがわかりません。偶然にも原因になりそうなものを発見したので、回答します。

jqueryで指定しているクラス名と、削除ボタンについているクラス名が異なっています。これを直せば、上手くいくあるいは、エラーが表示されるようにはなると思います。

投稿2020/07/30 03:38

hayato7

総合スコア1135

ciel2231

2020/07/30 03:56

クラス名を一緒にしたのですが、変わらずでした。。

m.ts10806

2020/07/30 04:19

エラー出てないか確認してください。ブラウザ、サーバー両方です。「できない」「変わらない」はどちらも現象を説明していません。

hayato7

2020/07/30 04:55

>クラス名を一緒にしたコードをどのように変更したのかを書いてください。

ciel2231

2020/07/30 05:15

m.ts10806 どちらもエラー表記は出てないです。

ciel2231

2020/07/30 05:18

hayato7 削除ボタンについているクラス名：<div class="delete_todo">x</div> jqueryで指定しているクラス名：('＃todos').on('click', '.delete_todo',function(){ var id = $(this).parents('li').data('id');

hayato7

2020/07/30 05:42

('＃todos').on('click', 半角の#で再度試してみてください。

ciel2231

2020/07/30 05:47

半角にしても削除ができないみたいです。。

m.ts10806

2020/07/30 05:49

#todosはulについていて、そのparents指定してるからでは。そもそも親にliはありません。lengthで要素の存在確認してみてください。むしろイベントは#todos li にして、クリックされた自身のdata属性とれば良いかと。

m.ts10806

2020/07/30 05:51

そもそもdelete_todoというクラスはどこにもありませんね。

hayato7

2020/07/30 06:14

確認モーダルも表示されていないということですよね？ちょっと何が原因なのか今のところわからないです。私の環境(PHPの部分はこちらで静的に置き換えています)では、 <div class="delete">x</div> を <div class="delete_todo">x</div> に変更しただけで、data-idの値も取得できていますし、confirm('are you sure?')の確認モーダルも表示されます。

ciel2231

2020/07/30 07:06

全くわからないです！

m.ts10806

2020/07/30 08:12 編集

そもそもdelete_todoというクラスはHTML上のどこにも設定されていませんね。

hayato7

2020/07/30 12:07

後はどこで上手くいっていないか一つ一つデバッグしていくしかないかと。例えば以下のような形です。 jqueryは読み込めているのか。クリックイベントは発火しているか。あと変更したコードは、質問部分にも反映した方が良いです。

行動規範の内容に同意します