jquery - How can i empty the element except one element in jQuery?

Question

Example,

 <td id="example">
   Something is inside here.
   <button id="paymentBtn">pay</button>
 </td>

What i want to do is, "only emtpy" before payment button and insert a new thing like this,

<td id="example">
   Deleted old one, and inserted new one.
   <button id="paymentBtn">pay</button>
 </td>

I know i can use

$("#paymentBtn").before("inserted new one");

but how can i empty?

If i empty example. it blows everything and

 $("#paymentBtn").before().empty(); 

This doesn't work :(

Answer 1

尝试

$($("#paymentBtn").get(0).previousSibling).remove();

演示：小提琴

正如建议的那样，您也可以

$('#add').click(function(){
    $("#paymentBtn").before("<span>inserted new one</span>");
})
$('#remove').click(function(){
    $("#paymentBtn").prev('span').remove();
})

演示：小提琴

Answer 2

其中一个是，将文本存储到<span class="deleteThis"></span>

 <td id="example">
   <span class="deleteThis"> Something is inside here.</span>
   <button id="paymentBtn">pay</button>
 </td>

并删除它，或用其他一些文本重写：

$("#paymentBtn").parent().find(".deleteThis").empty().html("Changed"); 

或直接从父级导航：

$("#example .deleteThis").empty().html("Changed"); 

第二个答案是，您可以删除除一个元素之外的所有内容：

var oldElem = $("#paymentBtn").clone();
$('#example').empty().append("Deleted successfully.").append(oldElem);

您克隆不想删除的元素，清空父元素并恢复克隆的元素。

Answer 3

理想情况下，我的 html 应该是这样的。文本不在其中：

<td id="example">
   <span>Something is inside here.</span>
   <button id="paymentBtn">pay</button>
 </td>

然后我希望我的 html 以后是这样的：

<td id="example">
   <span>Deleted old one, and inserted new one.</span>
   <button id="paymentBtn">pay</button>
 </td>

然后我会这样做：

$('#example').find('span').html('Deleted old one, and inserted new one.');

或这个，$('#paymentBtn').prev().html('Deleted old one, and inserted new one.');