Question

我查看过很多已经提出的问题但找不到。再次点击提交按钮后，我需要删除之前附加的消息。因此，这将允许您选择您在输入字段中键入的字符，然后它将附加一条消息，告诉您选择x字符。之后你可以重新提交我想要的另一个角色，但我不希望先前的追加是在那里。

我尝试在javascript中执行搜索功能，如果它不等于-1则删除div中的第一个p，但这不起作用= /

提前感谢您的帮助。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
        <link rel='stylesheet' type='text/css' href='styles/main.css'/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type='text/javascript' src='jquery/script.js'></script>
    </head>
    <body>
      <form class="" action="index.html" method="post">
          Chose your character (human, orc, elf) : <br><br><input id='text' type="text" name="mess" value="">
          <button id='button1' type="button" name="button" onclick="chooseChar()">Submit</button>
      </form>
      <br>
      <div id="box_holder"></div>
      <br><br>
      <button id='button2' type='button' name='button2' onclick="redirect()">Start Your Adventure</button>
    </body>
</html>

JS：

$(document).ready(function() {

  $('#button1').click(function(){
    var send = $("input[name=mess]").val();
    $('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
    });
    $('input').css("color","blue");


});

chooseChar = function () {
var text = document.getElementById('text').value;
var text = text.toLowerCase();
if(text == 'human') {
  $(document).ready(function() {

  $('#button1').click(function(){
    var div = $("#box_holder p").val();
    var searchTerm = "You";
    var searchDiv = div.search(searchTerm);
    if (searchDiv != -1) {
      $('div p').first().remove();
    }
  });
});
  window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
  return;
} else if (text == 'orc') {
  window.alert("ORC YOU ARE! (You may change your character at anytime)");
  return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
  window.alert("Start over! Please choose one of the characters above!");
  $(document).ready(function(){
    $('div').remove();
  });
  return;
}

$(document).ready(function() {

});
};

redirect = function() {
  var text = document.getElementById('text').value;
  var url = text+".html";
  window.location.href = url;
}

Answer 1

不要使用追加，请尝试使用html，如下所示

$('#box_holder').html('<p>'+ 'You have chosen your character to be: '+send+'</p>');

Here is a Plunkr更好地解释一下

$(document).ready(function() {

  $('#button1').click(function() {
    var send = $("input[name=mess]").val();
    $('#box_holder').html('<p>' + 'You have chosen your character to be: ' + send + '</p>');
  });
  $('input').css("color", "blue");


});

chooseChar = function() {
  var text = document.getElementById('text').value;
  text = text.toLowerCase();
  if (text == 'human') {
    $(document).ready(function() {

      $('#button1').click(function() {
        var div = $("#box_holder p").val();
        var searchTerm = "You";
        var searchDiv = div.search(searchTerm);
        if (searchDiv != -1) {
          $('div p').first().remove();
        }
      });
    });
    window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
    return;
  } else if (text == 'orc') {
    window.alert("ORC YOU ARE! (You may change your character at anytime)");
    return;
  } else if (text == 'elf') {
    window.alert("ELF YOU ARE !(You may change your character at anytime)");
    return;
  } else {
    window.alert("Start over! Please choose one of the characters above!");
    $(document).ready(function() {
      $('div').remove();
    });
    return;
  }

  $(document).ready(function() {

  });
};

redirect = function() {
  var text = document.getElementById('text').value;
  var url = text + ".html";
  window.location.href = url;
}

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <form class="" action="index.html" method="post">
    Chose your character (human, orc, elf) :
    <br />
    <br />
    <input id="text" type="text" name="mess" value="" />
    <button id="button1" type="button" name="button" onclick="chooseChar()">Submit</button>
  </form>
  <br />
  <div id="box_holder"></div>
  <br />
  <br />
  <button id="button2" type="button" name="button2" onclick="redirect()">Start Your Adventure</button>
</body>

</html>

您必须记住，append（）函数会在所选组件上附加内容。 html（）函数替换其中的所有内容。

希望有所帮助

Answer 2

因此，您的变量send会被发送，然后使用其中任何一个函数清除输入字段

$(document).ready(function() {

$('#button1').click(function(){
  $('#box_holder').children('p').remove(); <===========
  or                                                  Either of these should work
  $('#box_holder').empty(); <===========================
  var send = $("input[name=mess]").val();
  $('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");


});

单击相同的按钮后，如何在附加消息后删除jquery中的附加消息？

2 个答案: