@某人之后整体删除的方法

作者:可乐 发布时间:October 31, 2017 分类:前端 No Comments

今天有人在群里问了下这个东西,顺手写个demo吧。挺有意思的一个东西

1.gif



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
    <style type="text/css">
        div{ float: left; width: 500px; border: 1px solid #CCC;padding: 5px; outline: none}
        input{ width: 70px; display: inline-block; border: none; color: #00F; outline: none}
        button{ height: 34px; padding: 0 20px; }
    </style>
    <div contenteditable="true" id="test">test <input value="@keyword1" disabled /> del <input value="@keyword2" disabled /> 2 <input value="@keyword3" disabled /> 4</div><button>发送</button>
    <p id="result"></p>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('button').on('click', function(event) {
                $('#result').html($('#test').html())
                var input = $('#result').find('input')
                input.each(function(index, el) {
                    $(el).after($(el).val())
                    $(el).remove()
                });
                console.log($('#result').text())
            });
        });
    </script>
</body>
</html>

标签: none

评论已关闭