当前位置： 文江博客话题详情

在3个divs中删除可读取的属性

发布于 2025-01-29 15:56:57 字数 2944 浏览 3 评论 0原文

我正在创建一个待办事项列表，希望用户能够编辑和删除添加的任务，通过从HTML删除ReadOnly属性，这将是可能的。但是我正在努力执行编辑功能。

这是我的代码：

    const formulario=document.getElementById("new-task-form");
    const lista=document.getElementById("list");
    const input=document.querySelector("#new-task-input");
    
    let id=0;
    
    formulario.addEventListener('submit', (e)=>{
        //console.log("activado");
        e.preventDefault();
        addTask();
    
    });
    
    let addTask=()=>{
        id++;
        let task=input.value;
        lista.innerHTML+=`<div id="tasks">
        <div class="task" id="taskin">
             <div class="content" id="${id}">
                 <input 
                 id="${id}"
                 type="text"
                 class="text"
                 value=${task}
                 readonly
                 />
             </div>
             <div class="actions">
                 <button class="edit">Edit</button>
                 <button class="delete">Delete</button>
             </div>
            </div> 
        </div> `
    
        input.value='';
    }
    
    
    
    lista.addEventListener('click', (evento)=>{
        console.log(evento);
        if(evento.target.className=="edit"){
            console.log("Editar");
        }else if(evento.target.className=="delete"){
            console.log("Borrar");
            
    
        }
    })
    <body>
    <header>
        <h1>Task List</h1>
        <form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
            <input type="text" id="new-task-input" placeholder="Que vas a hacer" />
            <input  type="submit" id="new-task-submit" value="Add Task" />
        </form>
    </header>
        
    <main>
        <div id="list" class="task-list">
            
            <h2>Tasks</h2>

            <div id="tasks">
               
               <!-- <div class="task">
                    <div class="content">
                        <input type="text" 
                        class="text"
                        value="My Task"
                        readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>

        </div>
    </main>
    <script src="app.js"></script>.
</body>
</html>

预先感谢：D

原文

i am creating a to-do list, i want the user to be able to edit and delete the added tasks, this will be possible by removing readonlyattribute from HTML. but i am struggling doing the edit function.

Here is my code:

    const formulario=document.getElementById("new-task-form");
    const lista=document.getElementById("list");
    const input=document.querySelector("#new-task-input");
    
    let id=0;
    
    formulario.addEventListener('submit', (e)=>{
        //console.log("activado");
        e.preventDefault();
        addTask();
    
    });
    
    let addTask=()=>{
        id++;
        let task=input.value;
        lista.innerHTML+=`<div id="tasks">
        <div class="task" id="taskin">
             <div class="content" id="${id}">
                 <input 
                 id="${id}"
                 type="text"
                 class="text"
                 value=${task}
                 readonly
                 />
             </div>
             <div class="actions">
                 <button class="edit">Edit</button>
                 <button class="delete">Delete</button>
             </div>
            </div> 
        </div> `
    
        input.value='';
    }
    
    
    
    lista.addEventListener('click', (evento)=>{
        console.log(evento);
        if(evento.target.className=="edit"){
            console.log("Editar");
        }else if(evento.target.className=="delete"){
            console.log("Borrar");
            
    
        }
    })
    <body>
    <header>
        <h1>Task List</h1>
        <form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
            <input type="text" id="new-task-input" placeholder="Que vas a hacer" />
            <input  type="submit" id="new-task-submit" value="Add Task" />
        </form>
    </header>
        
    <main>
        <div id="list" class="task-list">
            
            <h2>Tasks</h2>

            <div id="tasks">
               
               <!-- <div class="task">
                    <div class="content">
                        <input type="text" 
                        class="text"
                        value="My Task"
                        readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>

        </div>
    </main>
    <script src="app.js"></script>.
</body>
</html>

Thanks in advance :D

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

战皆罪 2025-02-05 15:56:57

我已经在您的JS代码中添加了一些行。请检查。

    lista.addEventListener('click', (evento)=>{
    let parentEl = evento.target.parentNode.parentNode;
    let input = parentEl.getElementsByTagName('input');
    if(evento.target.className=="edit"){
        console.log("Editar");
        input[0].removeAttribute('readonly');
    }else if(evento.target.className=="delete"){
        console.log("Borrar");
    }
    })

在下面的摘要中进行测试：

const formulario=document.getElementById("new-task-form");
    const lista=document.getElementById("list");
    const input=document.querySelector("#new-task-input");
    
    let id=0;
    
    formulario.addEventListener('submit', (e)=>{
        //console.log("activado");
        e.preventDefault();
        addTask();
    
    });
    
    let addTask=()=>{
        id++;
        let task=input.value;
        lista.innerHTML+=`<div id="tasks">
        <div class="task" id="taskin">
             <div class="content" id="${id}">
                 <input 
                 id="${id}"
                 type="text"
                 class="text"
                 value=${task}
                 readonly
                 />
             </div>
             <div class="actions">
                 <button class="edit">Edit</button>
                 <button class="delete">Delete</button>
             </div>
            </div> 
        </div> `
    
        input.value='';
    }
    
    
    
    lista.addEventListener('click', (evento)=>{
        let parentEl = evento.target.parentNode.parentNode;
        let input = parentEl.getElementsByTagName('input');
        console.log(input[0]);
        if(evento.target.className=="edit"){
            input[0].removeAttribute('readonly');
            console.log("Editar");
        }else if(evento.target.className=="delete"){
            console.log("Borrar");
            
    
        }
    })
<body>
    <header>
        <h1>Task List</h1>
        <form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
            <input type="text" id="new-task-input" placeholder="Que vas a hacer" />
            <input  type="submit" id="new-task-submit" value="Add Task" />
        </form>
    </header>
        
    <main>
        <div id="list" class="task-list">
            
            <h2>Tasks</h2>

            <div id="tasks">
               
               <!-- <div class="task">
                    <div class="content">
                        <input type="text" 
                        class="text"
                        value="My Task"
                        readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>

        </div>
    </main>
    <script src="app.js"></script>.
</body>
</html>

希望它有帮助。

I have added some lines to your JS code. Please check.

    lista.addEventListener('click', (evento)=>{
    let parentEl = evento.target.parentNode.parentNode;
    let input = parentEl.getElementsByTagName('input');
    if(evento.target.className=="edit"){
        console.log("Editar");
        input[0].removeAttribute('readonly');
    }else if(evento.target.className=="delete"){
        console.log("Borrar");
    }
    })

Test it in the Snippet below:

const formulario=document.getElementById("new-task-form");
    const lista=document.getElementById("list");
    const input=document.querySelector("#new-task-input");
    
    let id=0;
    
    formulario.addEventListener('submit', (e)=>{
        //console.log("activado");
        e.preventDefault();
        addTask();
    
    });
    
    let addTask=()=>{
        id++;
        let task=input.value;
        lista.innerHTML+=`<div id="tasks">
        <div class="task" id="taskin">
             <div class="content" id="${id}">
                 <input 
                 id="${id}"
                 type="text"
                 class="text"
                 value=${task}
                 readonly
                 />
             </div>
             <div class="actions">
                 <button class="edit">Edit</button>
                 <button class="delete">Delete</button>
             </div>
            </div> 
        </div> `
    
        input.value='';
    }
    
    
    
    lista.addEventListener('click', (evento)=>{
        let parentEl = evento.target.parentNode.parentNode;
        let input = parentEl.getElementsByTagName('input');
        console.log(input[0]);
        if(evento.target.className=="edit"){
            input[0].removeAttribute('readonly');
            console.log("Editar");
        }else if(evento.target.className=="delete"){
            console.log("Borrar");
            
    
        }
    })
<body>
    <header>
        <h1>Task List</h1>
        <form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
            <input type="text" id="new-task-input" placeholder="Que vas a hacer" />
            <input  type="submit" id="new-task-submit" value="Add Task" />
        </form>
    </header>
        
    <main>
        <div id="list" class="task-list">
            
            <h2>Tasks</h2>

            <div id="tasks">
               
               <!-- <div class="task">
                    <div class="content">
                        <input type="text" 
                        class="text"
                        value="My Task"
                        readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>

        </div>
    </main>
    <script src="app.js"></script>.
</body>
</html>

Hope it helps.

回复 原文
じее 2025-02-05 15:56:57

  1. 首先，2个元素具有相同的id的值：

    ＆lt; div class =“ content” id =“ $ {id}”＆gt; and ＆lt; input ID =“ $ {id}”＆gt; < /p>

  2. 您可以更改与：

const formulario=document.getElementById("new-task-form");
    const lista=document.getElementById("list");
    const input=document.querySelector("#new-task-input");
    
    let id=0;
    
    formulario.addEventListener('submit', (e)=>{
        //console.log("activado");
        e.preventDefault();
        addTask();
    
    });
    
    let addTask=()=>{
        id++;
        let task=input.value;
        lista.innerHTML+=`<div id="tasks">
        <div class="task" id="taskin">
             <div class="content" id="${id}">
                 <input 
                 id="input-${id}"
                 type="text"
                 class="text"
                 value=${task}
                 readonly
                 />
             </div>
             <div class="actions">
                 <button class="edit" data-task_id="input-${id}">Edit</button>
                 <button class="delete" data-task_id="input-${id}">Delete</button>
             </div>
            </div> 
        </div> `
    
        input.value='';
    }
    
    
    
    lista.addEventListener('click', (evento)=>{
        if(evento.target.className=="edit"){
            document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
        }else if(evento.target.className=="delete"){
            document.getElementById(evento.target.dataset.task_id).remove();
            
    
        }
    })
<body>
    <header>
        <h1>Task List</h1>
        <form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
            <input type="text" id="new-task-input" placeholder="Que vas a hacer" />
            <input  type="submit" id="new-task-submit" value="Add Task" />
        </form>
    </header>
        
    <main>
        <div id="list" class="task-list">
            
            <h2>Tasks</h2>

            <div id="tasks">
               
               <!-- <div class="task">
                    <div class="content">
                        <input type="text" 
                        class="text"
                        value="My Task"
                        readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>

        </div>
    </main>
    <script src="app.js"></script>.
</body>
</html>

  1. First, 2 elements have the same id 's value :

    <div class="content" id="${id}"> and <input id="${id}">

  2. You can change same as :

const formulario=document.getElementById("new-task-form");
    const lista=document.getElementById("list");
    const input=document.querySelector("#new-task-input");
    
    let id=0;
    
    formulario.addEventListener('submit', (e)=>{
        //console.log("activado");
        e.preventDefault();
        addTask();
    
    });
    
    let addTask=()=>{
        id++;
        let task=input.value;
        lista.innerHTML+=`<div id="tasks">
        <div class="task" id="taskin">
             <div class="content" id="${id}">
                 <input 
                 id="input-${id}"
                 type="text"
                 class="text"
                 value=${task}
                 readonly
                 />
             </div>
             <div class="actions">
                 <button class="edit" data-task_id="input-${id}">Edit</button>
                 <button class="delete" data-task_id="input-${id}">Delete</button>
             </div>
            </div> 
        </div> `
    
        input.value='';
    }
    
    
    
    lista.addEventListener('click', (evento)=>{
        if(evento.target.className=="edit"){
            document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
        }else if(evento.target.className=="delete"){
            document.getElementById(evento.target.dataset.task_id).remove();
            
    
        }
    })
<body>
    <header>
        <h1>Task List</h1>
        <form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
            <input type="text" id="new-task-input" placeholder="Que vas a hacer" />
            <input  type="submit" id="new-task-submit" value="Add Task" />
        </form>
    </header>
        
    <main>
        <div id="list" class="task-list">
            
            <h2>Tasks</h2>

            <div id="tasks">
               
               <!-- <div class="task">
                    <div class="content">
                        <input type="text" 
                        class="text"
                        value="My Task"
                        readonly
                        />
                    </div>
                    <div class="actions">
                        <button class="edit">Edit</button>
                        <button class="delete">Delete</button>
                    </div>
                </div> -->

            </div>

        </div>
    </main>
    <script src="app.js"></script>.
</body>
</html>

回复 原文
人疚 2025-02-05 15:56:57

也许您的意思是删除三个Divs内部文本框上的ReadOnly属性？

$('.edit').click(function(){

$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');

});



$('.edit_first').click(function(){

$('#first_textbox').removeAttr('readonly');

});

$('.edit_second').click(function(){

$('#second_textbox').removeAttr('readonly');

});

$('.edit_third').click(function(){

$('#third_textbox').removeAttr('readonly');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>

Maybe you mean remove the readonly attribute on textbox inside the three divs?

$('.edit').click(function(){

$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');

});



$('.edit_first').click(function(){

$('#first_textbox').removeAttr('readonly');

});

$('.edit_second').click(function(){

$('#second_textbox').removeAttr('readonly');

});

$('.edit_third').click(function(){

$('#third_textbox').removeAttr('readonly');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>

回复 原文
~没有更多了~

关于作者

蓝天白云

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文