プログラミング学習用

JQuery .empty()

JavaScript

Jquery .empty()

Jqueryの.empty()についてですが、こちらのメソッドは要素を削除するとても便利なメソッドとなっております。だけど何も考えずに使うとめんどくさいことに。。。何かしらを検索してエラーがあった場合画面に戻り、エラーメッセージが表示されるような処理があるとします。そしてClearボタンを押すことでエラーメッセージを削除するような機能があるとします。例えばこんな感じ。検索等は省略させて頂いてます。

AddMessageでリストにmessageを追加した後にClearを押すことで要素を消去しています。消去した後にAddMessageを押しますが何も追加されません。。以下ソースコードです。

f:id:Tokuty:20201029214333g:plain

index.html

<body>
    <div class="msg_err_list">
        <ul>
            <li>err_message</li>
        </ul>
    </div>
    <button id="clear">clear</button>
    <button id="add">AddMessage</button>
    <script src="index.js"></script>
</body>

index.js

$('#clear').on('click', function () {
    $('.msg_err_list').empty();
});

$('#add').on('click', function () {
    $('ul').append('<li>err_message</li>');
});

どうやらclass="msg_err_list"直下全ての子要素を消去してしまったためメッセージが追加されなくなってしまったようです。。解決策としてempty()で削除した後にもう一度<ul><li></li></ul>を追加してみましょう。

index.js 修正

$('#clear').on('click', function () {
    $('.msg_err_list').empty();
    $('.msg_err_list').append('<ul><li>err_message</li></ul>');
});

$('#add').on('click', function () {
    $('ul').append('<li>err_message</li>');
});

f:id:Tokuty:20201029220107g:plain

上手くいきました！便利なメソッドですが、何も考えずに実装しちゃうとこうなります。考えて使いましょう！