<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="../public/main.css">
<title>list</title>
</head>
<body>
<%- include('nav.html') %>
<div class="container mt-3">
<!-- <h2>서버에서 가져온 데이터</h2>
<% for(var i = 0; i < posts.length; i++){ %>
<h4 class="mt-5">할일 제목: <%= posts[i].제목 %></h4>
<p>할일 마감날짜: <%= posts[i].날짜 %></p>
<button class="btn btn-primary">할일 삭제</button>
<% }%> -->
<ul class="list-group mt-5">
<h2 class="ml-2">서버에서 가져온 데이터</h2>
<div class="container input-group mb-2">
<input class="form-control" id="search-input">
<button class="input-group-append btn btn-danger" id="search">검색</button>
</div>
<% for(var i = 0; i < posts.length; i++) { %>
<li class="list-group-item">
<p>글번호: <%= posts[i]._id %></p>
<h4>할일 제목: <%= posts[i].제목 %></h4>
<p>할일 마감날짜: <%= posts[i].날짜 %></p>
<button class="btn btn-primary delete" data-id="<%= posts[i]._id %>">삭제</button>
</li>
<% }%>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('.delete').click(function(e){
var 글번호 = e.target.dataset.id;
var 지금누른거 = $(this);
$.ajax({
method: 'DELETE',
url: '/delete',
data: {_id: 글번호}
}).done(function(결과){
console.log('Success Delete Element!!');
지금누른거.parent('li').fadeOut();
}).fail(function(xhr, textStatus, errorThrown){
console.log('Fail Delete Element!!');
console.log(xhr, textStatus, errorThrown);
});
});
$('#search').click(function(){
var 입력한값 = $('#search-input').val();
window.location.replace('/search?value=' + 입력한값);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
search.ejs 전체코드입니다!
