2017-03-14 15 views
0

mongooseを使用して要素をデータベースから取得した後で要素を削除しようとしています。しかし、私はどのようにリストの特定の要素を 'つかむ'か、それをどのように削除するのか分からない部分で立ち往生しています。Node.jsを使用してリスト項目を削除するExpress Mongoose

私のアプリでは、ユーザーとその年齢のリストがあります。これは私のfrontend.js

ある

:ここ は(frontend.jsの追加後に編集)私のuserview.ejs

<meta charset="UTF8"> 
 
<link href="../public/javascripts/frontend.js"> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="/stylesheets/userlist.css"> 
 
<link href='//fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'> 
 
<link href='//fonts.googleapis.com/css?family=NTR' rel='stylesheet'> 
 
<html> 
 
    
 
    <head> 
 
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
     <title>Userlist</title> 
 
     <script src="javascripts/frontend.js"></script> 
 
    <script> 
 
      
 
     </script> 
 
     
 
    </head> 
 
    
 
    <div class="container-fluid"> 
 
      <div class="row"> 
 
        <h1><strong>FORM</strong></h1> 
 
        <hr id="hr2" style="border: 6px solid palevioletred" > 
 
       <div id="black"> 
 
        <form class="form-horizontal" method="post" action="/users"> 
 
         <fieldset> 
 

 

 
         <!-- Text input--> 
 
         <div class="form-group"> 
 
          <label class="col-md-4 control-label" for="textinput">Name : </label> 
 
          <div class="col-md-4"> 
 
          <input id="textinput" name="name" placeholder="Enter Username" class="form-control input-md" type="text" value="Name" onfocus="if (this.value=='Name') this.value='';"> 
 

 
          </div> 
 
         </div> 
 

 
         <!-- Text input--> 
 
         <div class="form-group"> 
 
          <label class="col-md-4 control-label" for="textinput">Age : </label> 
 
          <div class="col-md-4"> 
 
          <input id="textinput" name="age" placeholder="Enter Age" class="form-control input-md" type="number"> 
 

 
          </div> 
 
         </div> 
 

 
         <!-- Button --> 
 
         <!-- Button (Double) --> 
 
         <div class="form-group"> 
 

 
          <div class="col-md-8"> 
 
          <button id="singlebutton" name="button1id" class="btn btn-success">Add User</button> 
 
          </div> 
 
         </div> 
 

 
      <body> 
 

 
       <h1><strong>USERS</strong></h1> 
 
       <hr id="hr1" style="border: 6px solid #7ec4ec;" > 
 
       <ul id="list" class="triangle"> 
 
        <% for(var i=0; i<userlist.length; i++) {%> 
 
         <li><%= userlist[i].name %> : <%= userlist[i].age %> <a href="#" onclick="delete_element('<%= userlist[i]._id %>')" id="delete">Delete</a> || <a href="#" onclick="update_element()">Update</a></li> 
 
        <% } %> 
 
       </ul> 
 
      </body> 
 

 

 
         </fieldset> 
 
        </form> 
 
       </div> 
 
       </div> 
 
    </div> 
 
</html>

EDITです

var $ = require('jquery'); 
 
function delete_element (userId) { 
 
    $.post('delete/user/',userId,function(){ 
 
      
 
     alert('Deleting....'); //For now i have just added an alert. 
 
    }); 
 
}

これは私の新しいusers.js

'use strict' 
 

 
var express = require('express'); 
 
var router = express.Router(); 
 
var User=require('../models/usermodel.js'); 
 
var $= require('jquery'); 
 
    
 
/* GET users listing. */ 
 

 

 
router.get('/', function(req, res, next) { 
 
    User.find({},function(err,userModel){ 
 
     res.render('userview',{userlist:userModel}); 
 
    }); 
 
}); 
 

 

 
router.post('/', function(req, res, next) { 
 
    
 
    var newUser = new User({ 
 
      name:req.body.name, 
 
      age: req.body.age   
 
    }); 
 
    
 
    console.log(newUser); 
 
    // save the user 
 
    newUser.save(function(err) { 
 
     if (err) throw err; 
 

 
     console.log('User created!'); 
 
    }); 
 

 
}); 
 

 

 
router.post("delete/user/:id", deleteUser); 
 

 
function deleteUser(req,res){ 
 
    
 
    User.findById(req.params.id).remove().exec(function(err){ 
 
     if (!err) { 
 
       console.log('Removed Successfully'); 
 
     } 
 
     else { 
 
       console.log('Error in removing the entry'); 
 
     } 
 
    }); 
 
} 
 

 

 
    /* 
 
function delete_element(id){ 
 
    
 
     $('#delete').on("click",function(){ 
 
      $(this).parent().remove(); 
 
     }); 
 
     User.remove({_id: req.body.id }, function(err) { 
 
     if (!err) { 
 
       console.log('Removed Successfully'); 
 
     } 
 
     else { 
 
       console.log('Error in removing the entry'); 
 
     } 
 
     
 
      }); 
 
} 
 
    */    
 

 

 

 
/*router.post('/', function(req, res, next) { 
 
    userModel.update({name: req.params.name}, { $pullAll: {uid: [req.params.deleteUid] } }) 
 
    
 
});*/ 
 

 

 

 

 

 

 

 
module.exports = router;

答えて

0

埋め込みあなたの削除リンク内のユーザーの_idです:

onclick="delete_element('<%= userlist[i]._id %>')" 

これが生成されます。

onclick="delete_element('55510c6cf0e19f6414b30f97')" 

あなたの削除機能にユーザーの_idを渡します。

編集

わかりましたので、どうやら、あなたが直接あなたのビュー(HTML)から、サーバー(ノード)上で定義された関数を呼び出すようにしようとしています。 これは絶対に動作していません:)

onclick="delete_element()"は、ブラウザでローカルに関数を呼び出しています。コンソール(F12)は、error : delete_element is undefinedを呼び出す必要があります。

ので行く方法は以下の通りです:

1)あなたのフロントエンド・アプリケーションではないノードでJavaScript関数を(作成)サーバーを呼び出しますこと。最初の質問のためだ

router.post("delete/user/:id", deleteUser); // This is reached when the client calls post('delete/user/1a2b3c4d'). The id is read with req.params.id 

deleteUser = (req,res) => { 
    User.findById(req.params.id) 
     .remove() 
     .exec(error => { // Reply to the client, otherwise the request will hang and timeout. 
      if(error) return res.status(500).send(error); 
      res.status(200).end() 
     }) 
} 

は、1秒間に新しい質問を作成してください:

function delete_element (userId) { // This will be called on click and passed the user's _id 
    $.post('delete/user/'+userId) // This calls the server. Todo : add a callback, etc. 
} 

2)ノード・サーバーは、呼び出しを受信する対応するルートを持っている必要があります。

+0

はまだ動作しません。 delete_element()関数は正しいですか? –

+0

ええ、モンゴースコールが正しいようです。あなたの 'delete_element'関数はどのように見えますか(フロント側のもので、Nodeのものではありません)? –

+0

そのようなものはありません。 –

関連する問題