$(this).parent('li').fadeOut()에 관한 질문입니다.

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글
2022년 4월 2일 22:49 #30947

김영찬
참가자

분명 콘솔이나 터미널에는 오류가 없는데 fadeOut 기능이 적용이 안되서 질문 드립니다.

새로고침하면 li가 사라져있습니다. 단지 fadeOut 함수가 작동을 안 합니다.

list.ejs

<!doctype html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Todo App</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Write</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="#">임시</a>
</li>
</ul>
</div>
</div>
</nav>

<h2 class="my-4">서버에서 가져온 할일 리스트</h2>
<ul class="list-group">
<% for (var i=0; i<posts.length; i++) { %>
<li class="list-group-item">
<h4> 할일 제목 : <%= posts[i].제목 %>
</h4>

<p> 할일 마감날짜 : <%= posts[i].날짜 %>
</p>
<button class="delete" data-id="<%= posts[i]._id %>">삭제</button>
</li>
<% } %>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
$('.delete').click(function (e) {
var postNum = e.target.dataset.id;
$.ajax({
method: 'DELETE',
url: '/delete',
data: {_id : postNum},
}).done((result) => {
console.log('전송 완료');
$(this).parent('li').fadeOut();
});
});

</script>




<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>



</body>

</html>

server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const { list } = require('mongodb/lib/gridfs/grid_store');
app.use(bodyParser.urlencoded({ extended: true }));
const MongoClient = require('mongodb').MongoClient;
app.set('view engine', 'ejs');
// html이 아닌 ejs로 파일명을 바꿔주면 서버데이터를 html에 바인딩 가능

var db;
MongoClient.connect('mongodb+srv://@cluster0.1aaxe.mongodb.net/TodoApp?retryWrites=true&w=majority', { useUnifiedTopology: true }, function (error, client) {
if (error) return console.log(error)
db = client.db('TodoApp');

// db.collection('POST').insertOne({ 이름: 'John', _id: 100 }, function (error, result) {
// console.log('저장완료');
// });

app.listen(8080, function () {
console.log('listening on 8080')
});
});

app.get('/pet', function (req, res) {
res.send('펫용품 쇼핑할 수 있는 사이트입니다.');
});

app.get('/beauty', function (req, res) {
res.send('펫용품 쇼핑할 수 있는 사이트입니다.');
});

app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});

app.get('/write', function (req, res) {
res.sendFile(__dirname + '/write.html');
});

app.post('/add', function (req, res) {
db.collection('counter').findOne({ name: '게시물갯수' }, function (error, result) {
var postCounter = result.totalPost
// findeOne은 collection의 데이터 중 한 개의 데이터만 찾고 싶을 때 사용
// let이나 const보다 var을 사용한 이유는 var의 범위가 {}가 아닌 funtion의 범위이기 때문

db.collection('POST').insertOne({ _id : (postCounter + 1), 제목: req.body.title, 날짜: req.body.date }, function (error, result) {
console.log('저장완료');
db.collection('counter').updateOne({name:'게시물갯수'}, { $inc : {totalPost:1} }, function(error, result) {
// $inc는 기본값에 더해줄 값을 설정 가능. 하지만 어떤 값을 변경할지 설정할 떄는 {totalPost}와 같은 오퍼레이터 형태로 기입 필요.
if(error) {return console.log(error)};
res.send('전송완료');
});
});
});
});

app.get('/list', function (req, res) {
db.collection('POST').find().toArray(function (error, result) {
console.log(result);
// POST 콜렉션의 모든 데이터를 가져와서 콘솔에 찍어줍니다.
res.render('list.ejs', { posts: result });
// 찾은 데이터를 ejs 파일 속 posts라는 변수에 바인딩 해줍니다.
});
});

app.delete('/delete', function(req, res){
console.log(req.body)
req.body._id = parseInt(req.body._id);
db.collection('POST').deleteOne(req.body, function(error, result){
console.log('삭제완료');
});
});

2022년 4월 2일 23:42 #30964

codingapple
키 마스터

$(this)말고 $(e.target) 써봅시다

2022년 4월 3일 01:04 #30970

김영찬
참가자

그래도 안됩니다...

혹시 몰라 Arrow function 대신 일반 함수로 해봐도 결과가 똑같습니다.

그리고 삭제 버튼을 누르면 콘솔에 '전송완료' 라는 문구가 떠야하는데 안 뜨네요

왜 이러는지 잘 모르겠습니다.

2022년 4월 3일 09:43 #30982

codingapple
키 마스터

서버에서 삭제요청 완료시 res.send('완료') 이런거 실행해봅시다

서버에서 성공했다고 알려줘야 ajax요청의 then도 실행될듯요
글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

$(this).parent('li').fadeOut()에 관한 질문입니다.

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png