Question

我正在用javascript，bootstrap，jquery创建一个todo应用程序。单击任务时，我想使复选框的颜色更暗。我在想的是删除子元素i，但不删除任务（例如Python），并添加一个新的子元素i。我尝试过.empty（）方法，但事情是任务也被删除了。有什么方法可以删除元素但是离开任务吗？

var lst = document.getElementsByTagName("li");
var icon = '<i class="far fa-check-square"></i>';
for (var i = 0; i < 3; i++) {
  $(lst[i]).append(icon);
};

$(lst).click(function() {
  $(this).empty();
});

body { padding: 0; margin: 0; }
#container { width: 500px;}
#container, #header, #tasks { border: 1px solid black; margin: 0 auto; }
#header { text-align: center; padding: 0 0 20px 0;}
input { padding: 10px; border: 0; border-bottom: 1px solid rgb(177, 177, 177); }
span { padding: 7.5px; border: 1px solid rgb(177, 177, 177); background-color: rgb(219, 219, 219); }
li { list-style-type: none; padding: 20px 15px; border: 1px solid black;}
ul { padding: 0; margin: 0; }
.fa-check-square { float: right; font-size: 25px; }

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="header">
    <h1>TODO</h1>
    <input type="text" id="newTask" placeholder="type your task here">
    <span id="addTask">ADD</span>
  </div>
  <div id="tasks">
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>React</li>
    </ul>
  </div>
</div>

Answer 1

您必须使用.remove();代替.empty()

如果要删除整行，可以$(this).remove();

如果您只想删除支票图标，可以$(this).find('svg').remove();

如果您打算再次展示，也可以使用.hide()。例如：$(this).find('svg').hide();

＆＃13;

var lst = document.getElementsByTagName("li");
var icon = '<i class="far fa-check-square"></i>';
for (var i = 0; i < 3; i++) {
  $(lst[i]).append(icon);
};

$(lst).click(function() {
  $(this).find('svg').remove();
});

＆＃13;

body { padding: 0; margin: 0; }
#container { width: 500px;}
#container, #header, #tasks { border: 1px solid black; margin: 0 auto; }
#header { text-align: center; padding: 0 0 20px 0;}
input { padding: 10px; border: 0; border-bottom: 1px solid rgb(177, 177, 177); }
span { padding: 7.5px; border: 1px solid rgb(177, 177, 177); background-color: rgb(219, 219, 219); }
li { list-style-type: none; padding: 20px 15px; border: 1px solid black;}
ul { padding: 0; margin: 0; }
.fa-check-square { float: right; font-size: 25px; }

＆＃13;

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="header">
    <h1>TODO</h1>
    <input type="text" id="newTask" placeholder="type your task here">
    <span id="addTask">ADD</span>
  </div>
  <div id="tasks">
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>React</li>
    </ul>
  </div>
</div>

＆＃13;

Doc：https://api.jquery.com/remove/

Answer 2

找到i元素，然后将其删除。

$(lst).click(function() {
  $(this).find('i').remove();  
});

如何删除子元素

2 个答案: