编辑和删除Div点击和应用更改的代码

Edit And Delete Div on click and Apply changes in code too

本文关键字：代码 应用 删除 Div 编辑      更新时间：2023-09-26

我有一个由ul和li组成的div。现在我想在div中添加Edit和Delete按钮，通过点击编辑按钮，div应该是可编辑的，它应该显示两个更多的选项Save和Cancel。

现在主要的是运行程序后，当我Edit或Delete时，它也应该change code in Program。有什么办法可以帮我吗?由于

我认为你主要是坚持如何使你的div包含li和ul元素可编辑。为此，您需要使用div元素的contentEditable属性。

你可以使用JavaScript在Edit按钮中启用这个属性。

你可以使用下面的JavaScript代码来启用这个属性:

 onclick='document.getElementById("collapseOne").contentEditable="true";'

这里有一个相同的JSFiddle

试试这个 DEMO我已经添加了jQuery并尝试满足您的要求

 $(document).ready(function(){
   $('#edit').click(function(){
     document.getElementById("collapseOne").contentEditable="true";
     $('#collapseOne').attr('style','border:2px solid;');
     $('#edit').attr('style','display:none;');
     $('#done').attr('style','display:block;');
   });
   $('#done').click(function(){
     document.getElementById("collapseOne").contentEditable="false";
     $('#collapseOne').attr('style','border:none;');
     $('#edit').attr('style','display:block;');
     $('#done').attr('style','display:none;');
   });
});
HTML 

<div class="container">
<div class="col-lg-12">
    <h1 class="page-header">
        We are hiring!
    </h1>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default" id="panel1">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-target="#collapseOne"
                       href="#collapseOne">
                        .Net Developer  : Posted on 24th Feb
                    </a> 
                    <a href='#' style="float:right" id="edit">Edit</a>  
                    <a href='#' style="display:none;" id="done">Done</a>
                    <a href='#' style="float:center;margin-left:100px;">Delete</a>
                </h4>  
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                <p class="lead justified">
                    Qualifications and Skills:
                </p>
                <ul class="fa-ul">
                    <li>
                        <i class="fa"></i><span class="lead justified"> BE experience </span>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Solid skills </span>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Strong understanding </span><a>Delete</a>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Sharp analytical </span>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Ability to effectively </span>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Deal </span>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Strong sense of ownership, urgency, and drive</span>
                    </li>
                    <li>
                        <i class="fa"></i><span class="lead justified"> Excellent </span>
                    </li>
                </ul>
                <br />
                </div>
            </div>
        </div>
    </div>
</div>

相关文章：