Question

我需要使字母“x”可点击并添加一个功能，删除下面这一行创建的文字。

$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");

$(document).ready(function() {
	$("#hello").click(function() {
		$("#user").prepend("<li>Hello! <span id='clickable'>x</span></li>");
		$("#webpage").prepend("<li>Why hello there!!</li>");
		$("#user").children("li").first().click(function(){
			$(this).remove();
		});
		$("#webpage").children("li").first().click(function(){
			$(this).remove();
		});
	});
	$("#goodbye").click(function() {
		$("#user").prepend("<li>Goodbye!</li>");
		$("#webpage").prepend("<li>Goodbye, dear user!</li>");
		$("#user").children("li").first().click(function(){
			$(this).remove();
		});
		$("#webpage").children("li").first().click(function(){
			$(this).remove();
		});

	});
	$("#stop").click(function() {
		$("#user").prepend("<li>Stop copying me!</li>");
		$("#webpage").prepend("<li>Sorry, i meant no offense.</li>");
		$("#user").children("li").first().click(function(){
			$(this).remove();
		});
		$("#webpage").children("li").first().click(function(){
			$(this).remove();
		});
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <link href="CSS/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="CSS/styles.css" rel="stylesheet" type="text/css">
    <script src="jQuery/jQuery.js"></script>
    <script src="talk.js"></script>
    <title>Talk to the web page</title>
  </head>
  <body>
    <div class="container">
      <h1>Talk to the web page</h1>
      <p>Click a button to say something to the web page. See what it says back!</p>

      <button class="btn btn-primary" id="hello">Say "hello"</button>
      <button class="btn btn-inverse" id="goodbye">Say "goodbye"</button>
      <button class="btn btn-danger" id="stop">Say "stop copying me!"</button>

      <div class="row">
        <div class="col-md-6">
          <h2>You said:</h2>
          <ul class="unstyled" id="user">

          </ul>
        </div>

        <div class="col-md-6">
          <h2>The web page said back:</h2>
          <ul class="unstyled" id="webpage">

          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

一个可点击的字母，用于删除上面这一行创建的文字。

Answer 1

创建一个使用.on的点击事件（因为动态内容和不是动态内容）并删除父li元素：

$("#user").on("click", "span.clickable", function() {
    $(this).parent("li").remove();
});

同样使用班级clickable而不是ID（我假设您有超过1个）;

将函数分配给jQuery中的单个字母

1 个答案: