const component = {
  data: [
      '第一段文字',
      '第二段文字'
    ],
  render () {
    const list = document.querySelector('.list-group')
    const content = this.data.map((item, i) => `
      <li class="list-group-item">
        ${item}
        <button type="button" data-index="${i}"
        class="btn btn-info btn-sm ml-3">刪除</button>
      </li>
    `).join('')
    list.innerHTML = content
    
    // 刪除執行要寫在渲染後
    const btns = document.querySelectorAll('.list-group button')
    btns.forEach(item => {
      item.addEventListener('click', (e) => {
        const id = e.target.dataset.index
        this.removeData(id)
      })
    })
  },
  addData () {
    const text = document.querySelector('.input-group input')
      const addBtn = document.querySelector('.input-group button')
      addBtn.addEventListener('click', () => {
        const newText = text.value
        text.value = '' // 清空輸入框
        this.data.push(newText)
        this.render() // 重新渲染畫面
      })
  },
  removeData (id) {
    this.data.splice(id, 1)
    this.render()
  },
  init () {
    this.render()
    this.addData() // 先註冊並等待點擊後執行
  }
}

component.init()