使用 javascript 移除 html 元件

Question

---

當我按下提交按鈕時，如果生成任何錯誤，則代碼會創建一個跨度元素。

我的問題是如何從錯誤容器元素中清除舊錯誤，或者如果不可能，請總結錯誤。

$.each(err.responseJSON.errors, function (i, error) {
    var el = $(document).find('[name="'+i+'"]');
    el.after($('<span style="color: red;">'+error[0]+'</span>'));
    
});

我試過remove()但我做不到。 謝謝

Answer 1

您可以使用next()刪除跨度。 next()查找您所指的輸入字段的下一個兄弟。 它會給你跨度：

el.next().remove();

您可以在跨度 fe class="validation-span" 上使用 class

el.next(".validation-span").remove();

這將確保您只刪除跨度而不刪除其他元素（如果存在）:)

Answer 2

在輸入之后添加一個 span 元素並每次設置其 HTML 而不是使用.after 。

<input name="yourName">
<span class="errors"></span>
<script>
$(document).find('[name="'+i+'"] + .errors')
   .html('<span style="color: red;">'+error[0]+'</span>');
</script>

Answer 3

我更新了你想要的兩種方式，請選擇更適合你的方式

 function logErrorCleanSpan(errorMessage){ $('#errorContainer').text(errorMessage); } logErrorCleanSpan("Hello"); logErrorCleanSpan("Jarvis"); function logErrorAppendSpan(errorMessage){ var span = $("<span>"+errorMessage+"</span>"); $('#errorContainerSpanAppend').append(span); } logErrorAppendSpan("1. Hello "); logErrorAppendSpan("2. Jarvis ");

 #errorContainerSpanAppend{ display:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3>Append Error and clean the previous error<h3> <span id="errorContainer"></span> <h3>Append Error and keep the older one<h3> <span id="errorContainerSpanAppend"></span>

Answer 4

1. 每次單擊后使用索引為 span 分配一個 id 使用 id 刪除上一個 span
2. 使用 jquery 移除

$.each(err.responseJSON.errors, function (i, 錯誤) {

    var el = $(document).find('[name="'+i+'"]');

    el.after($('<span id="error'+i+'" style="color: red;">'+error[0]+'</span>'));

    if($(document).find('span#error+i - 1+')) {

          $( "span#error+i - 1+" ).remove();

     }
});

這只是一個示例代碼而不是正確的代碼。