inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

입문자를 위한, ES6+ 최신 자바스크립트 입문

질문드립니다.

235

gangsugi

작성한 질문수 73

0

뷰강의를 듣고 자바스크립트도 듣고 싶어서 강의를 듣는중인데요,

 

DOM 에서 HTML추가요소제거 강의에서

"앞에추가"버튼을 클릭해서 추가될때 뒤에 추가되는것처럼 X을 나오게 하려면 어떻게 해야 하나요?

예제는 뒤에 추가하는것만 x버튼이 나오는데...

뒤에 추가하는것처럼 하려고 헀더니 에러가 나서 아무래도 제가 잘 못한거 같아서요

 

es6 javascript

답변 1

0

짐코딩

안녕하새요 :)

"뒤에추가" 버튼 클릭시 로직과 동일 합니다.

아래 코드 보시면 이해가 되실 거에요

// 앞에추가 버튼 클릭시 이벤트
addBeforeBtn.addEventListener('click', function () {
  let li = document.createElement('li');
  let ul = document.querySelector('ul');
  let targetLi = document.querySelector('li#target');
  console.log(targetLi);
  li.textContent = inputBox.value;
  
  // "X" 버튼 추가 코드 (5줄)
  let button = document.createElement('button');
  button.textContent = 'X';
  button.classList.add('remove-btn');
  button.addEventListener('click', removeParentNode);
  li.appendChild(button);
  
  // ul.appendChild(li);
  ul.insertBefore(li, targetLi);
});

eslint.config.js 설정 질문입니다.

0

24

2

7강 흐름 제어 아키택쳐 코드 순서

1

26

1

수업자료 어디서 찾아볼 수 있나요?

0

22

1

함수 강의의 정답.. 어떤가요?

0

16

0

깃권한요청드립니다

0

26

1

<div id="banner">배너 이미지</div> 관련 질문

0

26

1

강의자료

0

33

1

윈도우에서 Node js를 설치하고 싶어요

0

34

0

addToFile function에서 path를 사용해 새로운 파일을 생성

0

40

1

[46강] EventEmitter를 활용한 10가지 패턴 중 플러그인 아키텍처

0

37

2

강의가 누락된것 같습니다.

0

45

2

용어 발음법이 계속 바뀌는 것 같은데 이런 부분들 개선이 가능할까요...?

0

54

1

counter01.html은 어디있을까요?

1

18

1

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

44

1

useState 직접 구현 부분에서 질문이 있습니다.

1

46

1

다 봤는데 완료가 안되네요

0

92

1

공부를 하면서 질문이 있습니다.

0

145

2

prettier 오류

0

137

1

ebook의 MDN참조링크 업데이트 부탁드립니다.

1

122

2

[계산기 CSS Markup]output 창의 높이관련

0

326

1

[계산기]소수점 이하 '0' 버튼 입력시 상단표시 관련

0

939

1

ebook 문의

1

407

1

삭제를 다 하고 싶은데요,,,

0

354

1

fontawesome kit를 사용하는 네모박스만 나오고아이콘은 나오지 않아요

0

1092

1