有什么方法可以删除按钮前面的文字吗？

Question

我想删除一个列表项以及相关的删除按钮（我正在制作一个基本的待办事项列表程序，并用js编写代码）

$(function(){
$(".btn1").click(function(){ //btn1 is the id of add button 
    v=$("#textbox").val(); //textbox is the id for my input box where i'll write todo work
    if(v==='')
        {
            alert("Please enter something");
        }
    else
    {
        document.getElementById('textbox').value='';
        document.getElementById('textbox').focus();

        var txt3 = document.createElement("button"); //this is the remove button to individally delete the todo
        txt3.className="new";
        txt3.innerHTML = "<i class='fas fa-window-close'></i>";

        $(".list").append(v,"    ",txt3,"<br><br>");
    }

         $(".new").click(function(){

             this.remove();
             v = v.replace(v, "");            
        });
    });
});

Answer 1

您可以使用下面给出的摘要之类的基本应用程序。

$(document).ready(() => {
  const list = $(".list");
  const addBtn = $(".btn1");
  const removeBtn = $(".btn2");
  let id = 0;
  addBtn.on("click", function() {
    const val = $("#textbox").val();
    const li = $(`<li id=${id++} class='list_item'>${val}&nbsp;&nbsp;</li>`);
    const cross = $(`<span class='cross'>x</span>`);
    cross.on("click", function() {
      $(this)
        .parent()
        .remove();
    });
    li.append(cross);
    list.append(li);
    $("#textbox").val("");
  });
  removeBtn.on("click", function() {
    list.html("");
  });
});

body {
  font-size: 14px;
}

.cross {
  padding: 5px;
  background: #d0cccc;
  color: #0b0303;
  border: 1px solid;
  margin-left: 10px;
}

.list {
  margin-left: 220px;
  display: flex;
  flex-direction: column;
}

.list_item {
  list-style: none;
  padding: 10px 20px;
}

input {
  min-width: 300px;
  padding: 5px 10px;
  font-size: 16px;
}

.btn-success {
  background: #5CB85C;
  border-radius: 4px;
  height: 32px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.btn-danger {
  background: #D95350;
  border-radius: 4px;
  height: 32px;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

<div class="container-fluid text-center c">
    <h1>My first working TODO</h1> <br><br> 
    <input type="text" id="textbox" name="todoenter" placeholder="What would you like TODO?"> 
    <button type="button" class="btn btn-success btn1">Add a TODO</button>
    <button type="button" class="btn btn-danger btn2">Remove all TODO</button>
    <ul class="list"></ul>
  </div>
  <!-- <div id="app">
    
  </div> -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>