liguofeng29’s blog

個人勉強用ブログだっす。

javascript - HTML要素削除

javascript ┗━DOM操作

HTML要素削除

メソッド

  • removeChild(oldNode)
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> removeChild </title>
</head>

<body id="test">
    <input id="add" type="button" value="div追加" disabled onclick="add();" />
    <input id="del" type="button" value="div削除" onclick="del();" />
    <div id="target" style="width:240px; height:50px;
      border:1px solid black">目標要素
    </div>
    <script type="text/javascript">
        // idで要素取得
        var body = document.getElementById("test");
        var target = document.getElementById("target");

        var add = function() {
            // 要素追加
            body.appendChild(target);
            document.getElementById("add").disabled = "disabled";
            document.getElementById("del").disabled = "";
        }
        var del = function() {
            // 要素削除
            body.removeChild(target);
            document.getElementById("del").disabled = "disabled";
            document.getElementById("add").disabled = "";
        }
    </script>
</body>

</html>

f:id:liguofeng29:20160211001601g:plain

HTMLSelectElementの要素削除

  • HTMLSelectElement.remove(long index)
  • HTMLSelectElement.option = null
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> HTMLSelectElement.remove() </title>
</head>

<body>
    <input id="opValue" type="text" />
    <input id="add" type="button" value="追加" onclick="add();" />
    <input id="del" type="button" value="削除" onclick="del();" /><br />
    <select id="show" size="8" style="width:120px;">
    </select>
    <script type="text/javascript">
        var show = document.getElementById("show");
        // 追加
        var add = function() {
                // Option生成
                var op = new Option(document
                    .getElementById("opValue").value);
                // 追加
                show.options[show.options.length] = op;
            }
            // 削除
        var del = function() {
            if (show.options.length > 0) {
                // 削除
                show.remove(show.options.length - 1);

                // show.options[show.options.length - 1] = null;
            }
        }
    </script>
</body>

</html>

f:id:liguofeng29:20160211002045g:plain

HTMLTableElementの要素削除

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
    <title> HTMLTableElementの削除 </title>
</head>

<body>
    <input id="delrow" type="button" value="最後の行削除" onclick="delrow();" /><br />
    <input id="delcell" type="button" value="最後の行の最後のセル削除" onclick="delcell();" /><br />
    <table id="test" border="1" style="width:400px;">
        <caption>タイトル</caption>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
        </tr>
    </table>
    <script type="text/javascript">
        var tab = document.getElementById("test");

        var delrow = function() {
            if (tab.rows.length > 0) {
                tab.deleteRow(tab.rows.length - 1);
            }
        }

        var delcell = function() {

            var rowList = tab.rows;
            var lastRow = rowList.item(rowList.length - 1);
            if (lastRow.cells.length > 0) {
                lastRow.deleteCell(lastRow.cells.length - 1);
            }
        }
    </script>
</body>

</html>

f:id:liguofeng29:20160211002618g:plain