Question

我有这样的HTML：

<html>
   <input type='button' name='button1' id='button1'>
   <input type='button' name='button2' id='button2'>
</html>

当用户点击 button2 时，我想要这样做，它应该删除 button1 元素并在其位置显示一条消息。在 button2 点击事件后，它将如下所示。

<html>
   Button1 Removed
   <input type='button' name='button2' id='button2'>
</html>

Answer 1

如果你使用jquery，你可以这样做：

$('#button2').click(function() {
  $('#button1').replaceWith('Button1 Removed')
});

Answer 2

将jQuery与嵌入式函数一起使用，也可以执行其他操作。

$('#button2').click(function() {  $('#button1').remove().html('<p>Button 1 Removed</>')  });

记住它的优良做法是始终将文本包含在某些标签中，例如

Answer 3

$(document).ready(function(){
    $("#button1").click(function(){
        $("#button1").replaceWith("<div>Hi der</div>");
    });
});

Answer 4

如果您使用的是jquery，那么这个解决方案：

$('#button2').click(function(){
  $('#button1').replaceWith('<p>Button1 Removed</p>');
});

Answer 5

$('#button1').click(function() { 
 $('this').remove().html('<p>Button 1 Removed</>') 
 alert('button1 removed'); 
});

Answer 6

$(document).ready(function(){
    $("#button2").click(function(){
        $("#button1").replaceWith("Button1 Removed");
    });
});