$(#' ').empty() 내용물은 지워지지만 자리는 남아있어요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

$(#' ').empty() 내용물은 지워지지만 자리는 남아있어요

[왕초보] 웹개발 종합반 v0

4주차

남*빈

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

id="removesample" 로 카드에 id를 달아서

스크립트에서 $(#'removesample').empty() 했어요

카드는 없어지지만 카드가 있던 자리는 남아있어요

자리까지 없애고 싶으면 어떻게 해야 할까요?

보고 계신 화면 전체를 캡처

해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

노란색 부분을 없애고 싶어요

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>나만의 추억앨범</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


	<style>
		@import url('https://fonts.googleapis.com/css2?family=Diphylleia&family=Gugi&family=Jua&display=swap');
		*{
			font-family: 'Diphylleia', serif;
		}
		.mytitle{
			height:250px;
			color:white;


			display:flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;


			background-image: url('https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
			background-position:center;
			background-size:cover;
		}
	.mytitle > button{
		width:150px;
		height:50px;
		background-color:transparent;
		color:white;
		border:1px solid white;
		border-radius:5px;
		margin-top:20px;
	}
	.mycards{
		width:1200px;
		margin: 30px auto 0px auto;
	}
	.mypostingbox{
		width:500px;
		margin: 30px auto 0px auto;
		padding:20px;
		box-shadow: 0px 0px 3px 0px blue;
		border-radius:5px;
	}
	.mybtn{
		display:flex;
		flex-direction: row;
		align-items:center;
		justify-content:center;
	}
	.mybtn > button{
		margin-right:5px;
	}
	</style>


</head>
<script type="module">


import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";




const firebaseConfig = {
  apiKey: "AIzaSyDRXs_l71t9Hi4Ta4LHY_3Nlsoq-W6uejo",
  authDomain: "sparta-cf3ef.firebaseapp.com",
  projectId: "sparta-cf3ef",
  storageBucket: "sparta-cf3ef.appspot.com",
  messagingSenderId: "331874953484",
  appId: "1:331874953484:web:3faf78051b4cf1f3c5c129",
  measurementId: "G-RBYNR6W9NM"
};




const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


	$("#postingbtn").click(async function () {
		let image=$('#image').val();
		let title=$('#title').val();
		let content=$('#content').val();
		let date=$('#date').val();


	    let doc = {
		'image':image, 'title':title, 'content':content, 'date':date
		};
	    await addDoc(collection(db, "albums"), doc);
	alert('저장 완료!');
	window.location.reload();
	})


	let url = "http://spartacodingclub.shop/sparta_api/seoulair";
	fetch(url).then(res => res.json()).then(data => {
   	 	let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
		$('#msg').text(mise);
	})


	$("#savebtn").click(async function () {
		$('#postingbox').toggle();
	})




	let docs = await getDocs(collection(db, "albums"));
	$('#removesample').empty();


	docs.forEach((doc) => {
	   	 let row = doc.data();


		let image=row['image'];
		let title=row['title'];
		let content=row['content'];
		let date=row['date'];


		let temp_html=`<div class="col">
		    <div class="card h-100">
		      <img src="${image}" class="card-img-top" alt="...">
		      <div class="card-body">
		        <h5 class="card-title">${title}</h5>
		        <p class="card-text">${content}</p>
	      </div>
		      <div class="card-footer">
        <small class="text-body-secondary">${date}</small>
      </div>
    </div>
  </div> `;


		$('#card').append(temp_html);
	}); 




</script>


<body>
	<div class="mytitle">
		<h1>나만의 추억 앨범</h1>
		<p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>
		<button id="savebtn">추억 저장하기</button>
	</div>


	<div class="mypostingbox" id="postingbox">
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="image" placeholder="앨범 이미지">
		<label for="floatingInput">앨범 이미지</label>
		</div>
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="title" placeholder="앨범 제목">
		<label for="floatingInput">앨범 제목</label>
		</div>
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="content" placeholder="앨범 내용">
		<label for="floatingInput">앨범 내용</label>
		</div>
		<div class="form-floating mb-3">
  		<input type="email" class="form-control" id="date" placeholder="앨범 날짜">
		<label for="floatingInput">앨범 날짜</label>
		</div>
		<div class="mybtn">
			<button id = "postingbtn" type="button" class="btn btn-primary">기록하기</button>
			<button type="button" class="btn btn-outline-primary">닫기</button>
		</div>
	</div>


	<divclass="mycards">
		<div   id="card" class="row row-cols-1 row-cols-md-4 g-4">


  <div   id="removesample" class="col">
    <div class="card h-100">
      <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">앨범 제목</h5>
        <p class="card-text">앨범 내용</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">앨범 날짜</small>
      </div>
    </div>
  </div>
 
	</div>
</body>
</html>

댓글 알림